如何使SVG充满以类似于CSS"background-size:cover"的方式进行操作 [英] How to make SVG "fill" act in a similar way to CSS "background-size: cover"
问题描述
我正在尝试创建一个SVG,该SVG使用特定的路径遮盖图像,但是,当我尝试使用图案填充区域时,图像无法覆盖整个区域.
I'm am trying to create an SVG which masks an image with a particular path however, when I try to fill the area using a pattern, the image does not cover the entire area.
预期
实际
在我的defs
中,我正在定义模式:
In my defs
I am defining the 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%" />
</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>
我使用的图像是动态资产(用户上传),但是如果需要,我可以获取尺寸.
The image I'm using is dynamic asset (user uploaded), however I can obtain the dimensions if necessary.
任何可以解决此问题的解决方案都会有所帮助,我尝试使用带面罩的image
,但没有运气.只要能显示蓝色背景图案而没有红色,那么我的问题就应该解决.
Any solution that would solve this issue would help, I tried using an image
with a mask but had no luck. As long as the blue background pattern shows through and no red does then my problem should be solved.
这是工作示例: http://codepen.io/Godwin/pen/hazqA
推荐答案
要解决此问题,请将适当的preserveAspectRatio
属性添加到<pattern>
中的<image>
,以告诉您希望图像进行缩放并切成薄片.
To fix this, add an appropriate preserveAspectRatio
attribute to the <image>
in your <pattern>
to tell it that you want the image to be zoomed and sliced.
<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>
这篇关于如何使SVG充满以类似于CSS"background-size:cover"的方式进行操作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!