Question

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

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

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

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

Answer 1

只需让模式的x，y，width和height与您路径的边界框匹配即可。你可以使用＆＃34; 0＆＃34;，＆＃34; 0＆＃34;，＆＃34; 1＆＃34; ＆安培; ＆＃34; 1＆＃34;这里分别因为patternUnits默认为objectBoundingBox，所以单位是相对于边界框表示的。然后使图案中的图像也包含路径边界框的width和height。这一次，你需要使用＆＃34; real＆＃34;虽然大小。

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

＆＃13;

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

＆＃13;

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

1 个答案: