如何使SVG"填充"行为与CSS"background-size:cover"类似

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的内容<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>

在这里演示

Answer 2

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

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

此链接具有preserveAspectRatio属性的所有可用选项.并且可以帮助将图像置于图案中心

所有选项