我想做的非常类似于使用背景图像填充SVG路径元素，除了那里提供的解决方案将平铺图像以填充整个背景区域。我不要 如果图像不能同时填满整个高度或整个宽度，那么我只想将其放在路径形状的中心即可。如果尝试通过更改height / width属性来限制行为，则渲染只会缩放图像，直到其至少占据一个尺寸。
我猜这种行为有点合理，因为它使用模式。我可以看到，我想要的并不是本质上的“模式”。我只想按原样在图像的中间拍一个图像，而不是在图像上打一个图案。但是，我确实希望我的SVG路径定义的形状边界能够在图像尺寸超出这些边界时切断图像的渲染。除了为该填充属性使用模式之外，我不知道要获得这种行为，就像在该问题的答案中所做的那样。
在一个类似的问题中：将背景图像（.png）添加到SVG圆形中，最底部的用户似乎表示他使用过滤器而不是图案来实现我想要实现的目标。但是，当我尝试这样做时，在渲染过程中不会考虑实际形状。渲染图像时无需考虑形状边界，这似乎毫无用处。
SVG中有什么方法可以得到类似图案的背景图像行为，而无需实际将图像拼接成图案？
只是使x，y，width和height模式匹配您的路径的边界框。您可以在此处分别使用“ 0”，“ 0”，“ 1”和“ 1”，因为patternUnits默认设置为objectBoundingBox，因此单位是相对于边界框表示的。然后使图案中的图像也具有路径边界框的width和height。这次，您将需要使用“实际”尺寸。
图像将自动在图案中居中，因为preserveAspectRatiofor的默认值<image>正是您想要的。
<svg width="600" height="600">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1">
<image width="120" height="250"
xlink:href="http://lorempixel.com/animals/120/250/"/>
</pattern>
</defs>
<path fill="url(#imgpattern)" stroke="black" stroke-width="4"
d="M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z" />
</svg>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句