Image 如何制作SVG“；填写「；以与CSS类似的方式行事”；背景尺寸：封面“；

我正在尝试创建一个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>

我使用的图像是动态资产（用户上传），但是如果需要，我可以获得尺寸

任何能够解决这个问题的解决方案都会有所帮助，我尝试使用带有面具的

图像

，但没有成功。只要蓝色背景图案显示通过，没有红色，那么我的问题就应该解决

---

下面是一个工作示例：

若要解决此问题，请在

中的

中添加一个适当的

preserveAspectRatio

属性，告诉它您希望对图像进行缩放和切片

<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>

---

如果需要

背景位置以及
背景尺寸：封面

preserveSpectratio=“xMidYMid slice”
//将使图像居中

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

完美！我不知道
preserveSpectratio
可以用在
svg
根目录之外的任何东西上。谢谢欢迎来到堆栈溢出！我可以帮助你写下答案，这些答案将被接受和投票。谢谢，我没有首先注意到差异！最低和中期