我正在尝试创建一个SVG，该SVG使用特定的路径遮盖图像，但是，当我尝试使用图案填充该区域时，该图像不会覆盖整个区域。
预期的
实际
在我的defs中，我定义了模式:
<pattern id="image" patternUnits="userSpaceOnUse" width="83.38" height="100" x="0" y="0">
<image xlink:href="http://goo.gl/kVVuy1" x="0" y="0" width="100%" height="100%" />
</pattern>
和形状:
<path id="shape" d="M80.4,0c0,33.3,0,66.7,0,100c-26.8,0-53.6,0-80.4,0c0,0,0-0.1,0-0.1 c3.3-12.3,6.5-24.6,9.8-37c0.9-21,1.9-41.9,2.8-62.9C35.2,0,57.8,0,80.4,0z" />
然后我添加形状:
<use xlink:href="#shape" fill="url(#image)"></use>
我使用的图像是动态 Assets (用户上传的)，但是如果需要，我可以获取尺寸。
任何可以解决此问题的解决方案都将有所帮助，我尝试使用带面具的
image，但没有运气。只要显示蓝色背景图案而没有显示红色，则应该解决我的问题。这是工作示例:http://codepen.io/Godwin/pen/hazqA
最佳答案
要解决此问题，请在preserveAspectRatio中的<image>中添加适当的<pattern>属性，以告诉您您希望图像被缩放和切片。
<pattern id="image" patternUnits="userSpaceOnUse" width="83.38" height="100" x="0" y="0">
<image xlink:href="http://goo.gl/kVVuy1"
x="0" y="0" width="100%" height="100%"
preserveAspectRatio="xMinYMin slice"/>
</pattern>
Demo here
关于image - 如何使SVG "fill"的行为类似于CSS "background-size: cover"，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23227195/