缩放 svg 路径而不缩放其填充图案答案

【问题标题】：Scale a svg path without scaling its fill pattern缩放 svg 路径而不缩放其填充图案
【发布时间】：2014-12-08 14:59:46
【问题描述】：

我要做的是通过设置整个 svg 的高度+宽度以及使用 svg 的 <g> 标签上的 CSS 属性 transform 来使用 CSS 缩放我的 svg 路径。
首先，一切看起来有点简单和合乎逻辑，因为我只是有一个模式，它只引用我的模式图像——应该重复多次以填充我的整个形状。我的形状中需要或多或少与 CSS 属性 background-repeat: repeat; 相同的效果。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <pattern id="Pattern" x="0" y="0" width="149" height="151" patternUnits="userSpaceOnUse">
            <image xlink:href="bg.jpg" x="0" y="0" width="149" height="151" />
        </pattern>
    </defs>
    <g>
        <path fill="url(#Pattern)" d="M15.83,262c1.531-1.814,2.579-3.021,5.029-5.861c22.052-25.553,84.151-110.104,94.935-122.23
        C88.973,92.133,48.727,34.085,32.509,16.395C26.863,9.311,16.216,4.047,6.333,4.047h86.315c-11.26,0-11.265,13.729-2.829,26.479
        l49.855,76.479l19.734-25.592l8.506-11.031c0,0-0.006,14.736-0.006,34.438c-0.701,0.935-7.822,10.457-8.519,11.315
        c-2.872,3.544-5.229,6.468-6.915,8.573c5.24,7.763,10.384,15.356,15.486,22.813c-0.053,34.541-0.031,68.4-0.031,68.4
        l-40.155-64.326c-8.353,12.002-51.124,69.823-68.554,93.937c-2.54,3.515-7.209,10.228-7.438,10.567
        c-1.626,2.441-2.108,3.094-3.922,5.899L15.83,262L15.83,262z"/>
    </g>
</svg>

【问题讨论】：

标签： css svg scaling

【解决方案1】：

SVG 模式（和过滤器）不像 CSS 的 background-repeat 那样工作，所以使用 SVG 无法实现您想要做的事情。您不能有隐式大小的 viewBox 和 SVG 元素并且有固定大小的模式元素：默认情况下，模式元素的大小将以 viewBox 为单位。

也就是说，如果您不做复杂的事情，那么有一些技巧可以让您获得想要做的事情。例如，您可以在整个 SVG 元素上设置 background-repeat:repeat，然后使用过滤器在形状外部的区域上进行绘制，使其看起来像被填充了一样。但是耶……

【讨论】：