Question

我有一个svg路径，我想应用一个模式。然而，图案似乎是水平拉伸，我认为我可能会错误地应用它。有没有办法确保svg填充模式保持其比例就好像它是背景？我的代码在下面，下面的jsFiddle是类似的设置略有不同。我想要应用的模式是500px乘500px。

<svg version="1.1"
 baseProfile="full"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:ev="http://www.w3.org/2001/xml-events" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<title>Text Pattern Fill Example</title>
<defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="500" height="500">
        <image xlink:href="img/textures/blogCont/white_wall_hash/white_wall_hash.png" x="0" y="0"
            width="500" height="500" />
    </pattern>
</defs>
<path d="M0 0 C 50 100 80 100 100 0 Z" fill="url(#img1)" />

以下是a jsfiddle

的链接

我正在尝试将this pattern与曲线效果相结合约{3}}

谢谢！

Answer 1

它正在拉伸，因为您将整个SVG拉伸到宽度（但不改变高度）。现在真的没有人能够与之抗争。如果SVG未以1：1呈现，则所有内容都将以某种方式拉伸。

您唯一的选择是将x和y中的SVG缩放相同的量。

http://jsfiddle.net/RKLec/1/

或者，也可以使用一种解决方法，例如在HTML中分层两个元素。例如。将图像作为背景放在一个<div>中，并将SVG放在另一个图层中并重叠它们，以便SVG“屏蔽”图案。

防止SVG模式的拉伸/ preserveAspectRatio

1 个答案: