Html 使用背景图像填充 SVG 路径元素，无需平铺或缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28756890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fill SVG path element with a background image without tiling or scaling
提问by Michael
I'd like to do something very much like Fill SVG path element with a background-imageexcept that the solution offered there will tile the image to fill the the entire background area. I don't want that. If the image doesn't fill either the entire height or the entire width, then I'd just like it to center within the path shape and let that be that. If I try to restrict the behavior by changing the height/width attributes, then the rendering just scales the image until it fills at least one of the dimensions.
我想做一些非常像用背景图像填充 SVG 路径元素的事情，除了那里提供的解决方案将平铺图像以填充整个背景区域。我不想要那个。如果图像没有填充整个高度或整个宽度，那么我只是希望它在路径形状内居中，然后就这样了。如果我尝试通过更改高度/宽度属性来限制行为，那么渲染只会缩放图像，直到它填充至少一个维度。
I guess this behavior somewhat makes sense since it uses patterns. I can see that what I want is not really a "pattern" per se. I just want to slap an image in the middle of my shape just as it is, not make a pattern out of it. However, I do want the shape boundaries defined by my SVG path to cut off the rendering of the image, whenever the image's size extends past those boundaries. I don't know else to get that behavior besides the use of a pattern for the fill attribute, as is done in the answer to that question.
我想这种行为有点道理，因为它使用了模式。我可以看到我想要的并不是真正的“模式”本身。我只想按原样在我的形状中间拍打图像，而不是从中制作图案。但是，我确实希望由我的 SVG 路径定义的形状边界在图像的大小超出这些边界时切断图像的渲染。除了对填充属性使用模式之外，我不知道还有什么其他行为，就像在该问题的答案中所做的那样。
In a similar question: Add a background image (.png) to a SVG circle shape, the user at the very bottom seems to indicate that he used a filter rather than a pattern to achieve what I'm seeking to achieve. However, when I try that, no regard is paid to the actual shape during rendering. The image is rendered without any regard to the shape boundaries, which seems pretty much useless.
在一个类似的问题中：Add a background image (.png) to a SVG circle shape，最底部的用户似乎表明他使用过滤器而不是模式来实现我想要实现的目标。但是，当我尝试这样做时，在渲染过程中没有考虑实际形状。渲染图像时不考虑形状边界，这似乎毫无用处。
Is there any way in SVG to get that pattern-like background image behavior but without actually tiling the image into a pattern?
在 SVG 中是否有任何方法可以获得类似图案的背景图像行为，但实际上无需将图像平铺成图案？
回答by Paul LeBeau
Just make the x, y, widthand heightof the pattern match the bounding box of your path. You can just use "0","0","1" & "1" respectively here because the patternUnitsdefaults to objectBoundingBox, so the units are expressed relative to the bounding box. Then make the image in your pattern have the widthand heightof the path bounding box also. This time, you'll need to use "real" sizes though.
只是使x，y，width和height模式匹配您的路径的边界框。您可以在这里分别使用“0”、“0”、“1”和“1”，因为patternUnits默认为objectBoundingBox，因此单位是相对于边界框表示的。然后使您的图案中的图像也具有路径边界框的width和height。这一次，您需要使用“真实”尺寸。
The image will be centred in the pattern automatically because the default value of preserveAspectRatiofor <image>does exactly what you want.
图像将自动在图案中居中，因为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>