我想做一些非常像
Fill SVG path element with a background-image的事情,除了那里提供的解决方案将平铺图像以填充整个背景区域.我不希望这样.如果图像没有填满整个高度或整个宽度,那么我只是希望它在路径形状中居中并让它成为那样.如果我尝试通过更改高度/宽度属性来限制行为,则渲染只会缩放图像,直到它至少填充其中一个维度.
我想这种行为有点意义,因为它使用模式.我可以看到我想要的并不是真正的“模式”本身.我只是想在我的形状中间拍一张图像,而不是制作一个图案.但是,每当图像的大小超过这些边界时,我确实希望SVG路径定义的形状边界能够切断图像的渲染.除了使用fill属性的模式之外,我不知道除了该问题的答案之外的其他行为.
在一个类似的问题：Add a background image (.png) to a SVG circle shape,最底层的用户似乎表明他使用过滤器而不是模式来实现我想要实现的目标.但是,当我尝试这样做时,在渲染过程中不考虑实际的形状.渲染图像时不考虑形状边界,这看起来几乎没用.
在SVG中是否有任何方法可以获得类似模式的背景图像行为,但实际上没有将图像平铺成模式？
解决方法
只需使模式的x,y,宽度和高度与路径的边界框匹配即可.你可以只使用“0”,“0”,“1”和&这里分别为“1”,因为patternUnits默认为objectBoundingBox,因此单位是相对于边界框表示的.然后使图案中的图像也具有路径边界框的宽度和高度.这次,您需要使用“真实”尺寸.
图像将自动居中于图案中,因为< 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>
