Question

我想要做的是通过设置整个svg的高度+宽度以及在svg transform上使用CSS属性<g>来使用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>

Answer 1

SVG模式（和过滤器）不像CSS的后台重复那样工作，所以使用SVG无法实现。您不能拥有隐式大小的viewBox和SVG元素并且具有固定大小的模式元素：默认情况下，模式元素将以viewBox单位调整大小。

也就是说，如果你没有做一些复杂的事情，有很多方法可以让你想要做什么。例如，您可以在整个SVG元素上设置background-repeat：repeat，然后使用过滤器在形状外部区域绘制，使其看起来像填充的一样。但是，是啊...

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

1 个答案: