如何将光栅图像缩放到 SVG 中的用户空间单位？

Question

我的问题

给定一个我知道多少像素 (px) 对应于一厘米 (cm) 的光栅图像和一个 SVG 路径，我在其中将用户空间单位定义为取决于浏览器宽度的视图框内的毫米：如何缩放图像，使其始终具有与 SVG 路径相同的每厘米像素比率？

背景

我有代表织物纹理的光栅图像，我想将这些图像与代表一件衣服的一部分的 svg 形状相匹配。我想将织物覆盖在形状上，因为它需要逼真的形状和图像的比例必须匹配。这一切都是动态完成的，这意味着我想为一般情况解决这个问题，而不仅仅是针对一个特定的图像和形状组合。

示例

我已经将我的通用代码和通用代码改编为这个特定的 JS Fiddle 来说明问题并显示我到目前为止的进度以及我遇到的问题： http://jsfiddle.net/nx3vrz94/16/

 <svg id="svgView-1" style="width:90vw" viewBox="0 0 635 334" >
 <path fill-opacity="1" fill="url(#fabric1001)" d="M0 0 L635 0 L334 290 Z " id="1"></path>

 <!--
Image: 1440x1080
horizontally: 
2,5 cm = 51 pixel
= 20,4 pixel per cm
 -->
 <defs>
   <pattern id="fabric1001" 
   patternContentUnits="objectBoundingBox" 
   viewBox="0 0 1 1" 
   preserveAspectRatio="xMidYMid slice" 
   width="100%" height="100%">
   <image xlink:href="https://cdn.shopify.com/s/files/1/0081/1076/8185/products/3.jpg?v=1540031315"         
           x="0" y="0"
           width="1" 
           height="1"
           preserveAspectRatio="xMidYMid slice" />
  </pattern>

 </defs>
</svg>

到目前为止，我设法将图像添加为图案，然后使用 URL 引用填充形状。我不明白的是如何告诉 SVG 该图像中的 20.4 像素对应于 10 个用户空间单位？

Answer 1

让您的生活更轻松，不要尝试先将图像适合模式，然后再将该模式反复（至少在概念上）适合路径，这样您总共有三个隐式大小转换来跟踪的，当您只需要正确调整图像大小时。

如果我理解正确，您的用户空间单位应该等于 1 毫米。那么，当

• 2.04 图像像素等于 1mm 等于 1 个用户空间单位
• 您的图片需要缩放 1 / 2.04
• 将图像从 1440 × 1080 缩放到 706 × 529（四舍五入，preserveAspectRatio 将负责其余部分）

除了在路径内填充“图案”填充外，您还可以使用剪辑路径从图像中剪切路径形状。 - 这实际上和从一块布上剪下一个部分的过程是一样的，顺便说一句……

<svg id="svgView-1" style="width:90vw" viewBox="0 0 635 334" >
    <clipPath id="clip">
         <path d="M0 0 L635 0 L334 290 Z "></path>
    </clipPath>
    <image xlink:href="https://cdn.shopify.com/s/files/1/0081/1076/8185/products/3.jpg?v=1540031315"         
           x="0" y="0"
           width="706" height="529"
           preserveAspectRatio="xMidYMid slice"
           clip-path="url(#clip)"/>
</svg>