0

有一个非常棒的 postcss 插件，叫做 postcss-inline-svg。我一直使用它从一个来源加载不同样式的 svg 图标。

如果您还没有听说过，请务必在 Github 上查看： https ://github.com/TrySound/postcss-inline-svg

如果您已经熟悉该插件，您可能知道通过 svg-load() 加载时可以更改 svg 图像的填充。

我想知道，是否可以定义线性渐变以将它们加载到 svg 图像的填充中。

就像是：

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="greenish">
            <stop  offset="0" style="stop-color:#A4C660"/>
            <stop  offset="1" style="stop-color:#45995B"/>
        </linearGradient>
    </defs>
    <symbol id="test" viewBox="0 0 102.0469 102.0479" width="102" height="102" fill="url(#greenish)">
        <path d="M98.4473,0H0V102.0479H102.0469V0Zm-2.835,95.6123H6.4346V6.4346H95.6123Z"/>
        <circle cx="33.4389" cy="38.1854" r="6.8354"/>
        <path d="M17.3242,76.1865H64.6587A13.4873,13.4873,0,1,0,84.7568,61.3074V24.0762A2.5505,2.5505,0,0,0,82.1855,21.5H17.3242a2.5421,2.5421,0,0,0-2.5713,2.5757v49.539A2.5459,2.5459,0,0,0,17.3242,76.1865ZM85.96,63.8018a1.6524,1.6524,0,0,1,.6816,2.2382L78.1689,81.9551a1.647,1.647,0,0,1-1.2646.8633,1.4522,1.4522,0,0,1-.1943.0117,1.6552,1.6552,0,0,1-1.2373-.5537l-8.0616-9.0977a1.6533,1.6533,0,0,1,2.4746-2.1933L76.3682,78.3l7.3564-13.8144A1.6537,1.6537,0,0,1,85.96,63.8018Zm-66.6368-37.73H80.1875V59.5352c.0257.0048.056.0142.0823.02a13.3865,13.3865,0,0,0-7.662.7542L65.9131,49.64,56.2324,34.2148,46.5586,49.64l-2.64,4.2056-4.0724-6.3544-5.6382,8.7969-5.64,8.7969H51.1221l-.0131-.02h15.55a13.4211,13.4211,0,0,0-2.4459,7.7343c0,.1351.0162.266.02.4-.0123-.1452-.02-.2815-.02-.4,0-.3984.0205-.792.0547-1.1816H19.3232Z"/>
    </symbol>
</svg>

这就是我在我的 HTML 文件中加载它的方式：

<svg role="img" class="test-svg">
            <use xlink:href="assets/images/svg/test.svg#test"/>
        </svg>

在此处下载测试文件： 文件

4

0 回答 0