Question

具有许多香草SVG文件，这些文件在渐变时看起来会更好。在HTML中使用它们时，可以使用CSS添加渐变。但是，新的用例需要SVG独立运行。不在带有CSS指令的文档中。因此，不能使用外部样式表，如此处所述 Documentation和此处How to style SVG with external CSS?

已手动更新了多个普通SVG。例如：

<svg width="120" height="120" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient spreadMethod="reflect"
    id="flameGradient"
    fx="25%"
    fy="75%"
>
  <stop offset="0%" stop-color="white"/>
  <stop offset="1%" stop-color="yellow"/>
  <stop offset="95%" stop-color="green"/>
</radialGradient>
</defs>
<circle fill="url(#flameGradient)" cx="40" cy="40" r="35"/>
<g transform="matrix(0 0 0 0)" fill="#fff">
<path d="m31.666 15v16.666h-16.666v16.669h16.666v16.666h16.669v-16.666h16.666v-16.669h-16.666v-16.666zm2.0736 2.4216h12.521v16.318h16.318v12.521h-16.318v16.318h-12.521v-16.318h-16.318v-12.521h16.318zm6.2464 16.295c-0.11983 1.4936-0.19492 3.11-0.24814 4.7861-0.49831-1.2963-1.6017-2.0622-3.8962-2.0622-1.8367 0-2.7082-0.12867-3.1917-0.23389 1.3081 0.44902 4.8874 2.4786 6.4461 9.3411-1.1455-3.7892-3.6967-8.3207-7.9635-6.4404-1.6562 0.73155-2.4976 0.96718-2.9892 1.0696 1.6003-0.12951 6.7015 0.41459 11.438 8.6651 0.023451 0.041038 0.035566 0.046942 0.054193 0.074159 0.008515 2.9269 0.027277 5.8807 0 8.7108 0 2.064 0.68169 2.2197 0.68169 0-0.02712-2.7999-0.016863-5.6541-0.014263-8.4969 0.073391-0.12724 0.1212-0.23114 0.1854-0.35082 4.7014-8.0822 9.7274-8.672 11.343-8.5511-0.5-0.10648-1.3362-0.34544-2.9692-1.0667-3.5047-1.5445-5.8456 1.2406-7.2076 4.3839-0.1717 0.26339-0.35472 0.60638-0.55619 1.0924-0.05442 0.12698-0.70362 2.9275-0.79863 3.3371 5.3e-5 -0.48689-0.002035-0.97215-0.002852-1.4575 1.4316-7.6378 5.2774-9.8361 6.6486-10.308-0.4839 0.10509-1.3526 0.23103-3.1803 0.23103-1.9205 0-3.0034 0.53515-3.6024 1.4632-0.045841-1.4156-0.091297-2.8363-0.17684-4.1871z"/>
</g>
</svg>

但是我有一个大型的HTML语句和CSS指令库，例如：

<div><img class="wing-nut" src="plant_health.svg" width="80" height="80" layout="fixed"></img>Plant health</div>

和

.wing-nut{border-radius:50%; display:inline-block; background:rgba(0, 0, 0, 0) radial-gradient(circle at bottom center, rgb(221, 62, 84), rgb(107, 229, 133));}

一直在寻找将CSS渐变指令转换为SVG渐变指令的工具。例如CSS radial gradient to SVG radial gradient

但是该工具仅支持线性渐变。

是否有工具或系统方法，用于将类似radial-gradient(circle at bottom center, rgb(221, 62, 84), rgb(107, 229, 133))的CSS指令转换为等效的SVG径向梯度？

如何将CSS渐变语法转换为SVG渐变语法？

0 个答案: