如何制作SVG＆＃34;填充＆＃34;以类似于CSS的方式行事＆＃34;背景大小：封面＆＃34;

Question

我正在尝试创建一个屏蔽具有特定路径的图像的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>

我使用的图片是动态资源（用户上传），但我可以根据需要获取尺寸。

任何解决此问题的解决方案都会有所帮助，我尝试使用带掩码的image但没有运气。只要蓝色背景图案显示出来并且没有红色就可以解决问题。

以下是工作示例：http://codepen.io/Godwin/pen/hazqA

Answer 1

要解决此问题，请在preserveAspectRatio的{​​{1}}中添加适当的<image>属性，告诉您希望图片缩放和切片。

<pattern>

Demo here

Answer 2

如果需要background-position以及background-size: cover;

preserveAspectRatio="xMidYMid slice" //将图像居中

此链接包含preserveAspectRatio属性的所有选项。并且可以帮助将图像置于模式中心

All Options