我有一个要应用模式的 svg 路径。但是,该图案似乎在水平拉伸(stretch),我认为我可能应用不正确。有没有办法确保 svg 填充图案保持其比例,就好像它是背景一样?我的代码在下面,下面的 jsFiddle 类似,但设置略有不同。我要应用的图案是 500px x 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曲线效果下降约 1/3 this svg page.
谢谢!
最佳答案
它正在拉伸(stretch),因为您将整个 SVG 拉伸(stretch)到宽度(但不改变高度)。现在真的没有办法与之抗争。如果 SVG 未以 1:1 呈现,则所有内容都将以某种方式拉伸(stretch)。
您唯一的选择是将 SVG 在 x 和 y 方向缩放相同的量。
或者,使用变通方法,例如在 HTML 中将两个元素分层。例如。将图像作为背景 <div>
并将 SVG 放在另一层并重叠它们,以便 SVG“掩盖”图案。
关于javascript - 防止 SVG 模式的拉伸(stretch)/preserveAspectRatio,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21718656/