使用背景图像填充SVG路径元素,而不进行平铺或缩放

Question

我想做一些非常类似于填充SVG路径元素和背景图像的东西,除了那里提供的解决方案将平铺图像以填充整个背景区域.我不希望这样.如果图像没有填满整个高度或整个宽度,那么我只是喜欢它在路径形状中居中并让它成为那样.如果我尝试通过更改高度/宽度属性来限制行为,则渲染只会缩放图像,直到它填充至少一个维度.

我猜这种行为有点意义,因为它使用模式.我可以看到我想要的并不是一个真正的"模式"本身.我只是想在我的形状中间拍一张图像,而不是制作一个图案.但是,我希望每当图像的大小超过这些边界时,我的SVG路径定义的形状边界就会切断图像的渲染.除了使用fill属性的模式之外,我不知道除了该问题的答案之外的其他行为.

在类似的问题中:将背景图像(.png)添加到SVG圆形状,最底层的用户似乎表明他使用过滤器而不是模式来实现我想要实现的目标.但是,当我尝试这样做时,在渲染过程中不考虑实际的形状.渲染图像时不考虑形状边界,这看起来几乎没用.

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

Answer 1

只是使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>