Question

有一个名为postcss-inline-svg的postcss超级强大的插件。我一直用它来从一个来源加载不同风格的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>

在此处下载测试文件： File

使用PostCSS：具有可编辑线性渐变的Inline-SVG

0 个答案: