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

Question

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

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

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

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

Answer 1

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

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

<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>