防止拉伸/保留 SVG 图案的纵横比

Question

我有一个想要应用模式的 svg 路径。但是，该模式似乎在水平拉伸，我认为我可能应用不正确。有没有办法确保 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)" />        

这是一个jsfiddle的链接

我正在尝试将这种模式和曲线效果结合起来，大约在这个 svg 页面的 1/3 处。

谢谢！

Answer 1

它是拉伸的，因为您将整个 SVG 拉伸到宽度（但不改变高度）。 现在真的没有办法与之抗争。 如果 SVG 不是以 1：1 渲染的，那么所有内容都将以某种方式拉伸。

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

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

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