Html 使用背景图像填充SVG路径元素，无需平铺或缩放

我想做一些非常类似的事情，除了这里提供的解决方案将平铺图像以填充整个背景区域。我不想那样。如果图像没有填充整个高度或整个宽度，那么我只希望它位于路径形状的中心，就这样吧。如果我试图通过更改“高度/宽度”属性来限制行为，则渲染只会缩放图像，直到它填充至少一个维度

我想这种行为有些道理，因为它使用模式。我可以看出，我想要的并不是一个真正的“模式”。我只想在我的形状中间拍打一个像它一样的形状，而不是用它做一个图案。但是，我确实希望SVG路径定义的形状边界在图像大小超出这些边界时切断图像的渲染。除了对fill属性使用模式之外，我不知道还有什么其他方法可以获得这种行为，正如在对该问题的回答中所做的那样

在一个类似的问题中：，最底层的用户似乎表示他使用了过滤器而不是模式来实现我想要实现的目标。但是，当我尝试这样做时，渲染过程中没有考虑实际形状。渲染图像时不考虑形状边界，这似乎非常无用

---

在SVG中有没有任何方法可以获得类似于背景图像的模式行为，但不实际将图像平铺成模式？

只需使模式的

x

、

y

、

宽度和
高度与路径的边界框匹配即可。您可以在这里分别使用“0”、“0”、“1”和“1”，因为
patternUnits
默认为
objectBoundingBox
，因此单位是相对于边界框表示的。然后使图案中的图像也具有路径边界框的
宽度
和
高度
。不过这一次，您需要使用“真实”尺寸

图像将自动在图案中居中，因为
的默认值
preserveAspectRatio
完全符合您的要求



非常感谢。这个例子似乎正是我想要的。我现在要改变我的项目，使用它，看看它是如何运行的。在我的环境中，它运行得很好。正是我需要的。再次感谢！因此，实际上，尽管问题是不使用缩放或平铺，但答案是将其自动缩放到100%，并设置一个填充整个宽度/高度的平铺大小，这样您就只使用一个平铺。如何使其填充svg所在的整个div？@JustAQuestion如果您尝试填充div，而不是svg元素，然后您应该使用类似于
div{background:url（myImage.jpg）；background size:cover；}
。