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

让您的生活更轻松，不要尝试首先将图像适合模式，然后反复（至少在概念上）使该模式适合路径，这样一来，您总共可以进行三个隐式大小转换其中，您只需要正确调整图像大小即可。

如果我对您的理解正确，则您的用户空间单位应等于1mm。然后，什么时候

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>

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

1 个答案: