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

Posted 2023-03-05

【中文标题】使用背景图像填充 SVG 路径元素，无需平铺或缩放

【英文标题】：Fill SVG path element with a background image without tiling or scaling

【发布时间】：2015-04-29 16:22:27

【问题描述】：

我想做一些非常类似于Fill SVG path element with a background-image 的事情，除了那里提供的解决方案将平铺图像以填充整个背景区域。我不想要那个。如果图像没有填满整个高度或整个宽度，那么我只是希望它在路径形状中居中，就这样。如果我尝试通过更改高度/宽度属性来限制行为，那么渲染只会缩放图像，直到它填充至少一个尺寸。

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

在类似的问题中：Add a background image (.png) to a SVG circle shape，最底部的用户似乎表示他使用过滤器而不是模式来实现我想要实现的目标。但是，当我尝试这样做时，渲染过程中不会考虑实际形状。渲染图像时不考虑形状边界，这似乎毫无用处。

在 SVG 中是否有任何方法可以获得类似于图案的背景图像行为，但实际上不需要将图像平铺成图案？

【参考方案1】：

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

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

<svg  >
  
  <defs>
      <pattern id="imgpattern" x="0" y="0"  >
        <image  
               xlink:href="http://lorempixel.com/animals/120/250/"/>
      </pattern>
  </defs>
  
  
  
  <path fill="url(#imgpattern)" stroke="black" stroke-
        d="M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z" />

</svg>

【讨论】：

非常感谢。这个例子似乎是我想要的。我现在要着手改变我的项目以使用它，看看效果如何。

在我的上下文中工作得很好。正是我需要的。再次感谢！

真的，尽管问题是关于不使用缩放或平铺，答案是让它自动缩放到 100%，并设置一个平铺大小填充整个宽度/高度，因此您只使用单个图块。

如何让它填满 svg 所在的整个 div？

@JustAQuestion 如果您尝试填充 div，而不是 SVG 元素，那么您应该使用 div background: url(myImage.jpg); background-size: cover; 之类的东西。