自动内嵌Adobe Illustrator SVG类

Question

我正在开发一个Laravel项目，其中一个SVG图标文件正被包含到刀片模板中。文件中的每个SVG都由<symbol>定义。我渲染个人图标为：

<svg viewBox="0 0 150 150"><use href="#icon-i-want"></use></svg>。

这很好，但SVGs是用Adobe Illustrator制作的，他们有这些自动生成的类，如.st0,.st1。这些类包含如fill或stroke的属性。例如：

.st0{fill:#2595FF;} <line class="st2" x1="27.8" y1="80.5" x2="39" y2="80.5"/>。

在这个文件中有太多的SVG，泛型类互相覆盖（有70多个.st0类）。我可以通过手动将类分解为属性来解决问题。

`.st0{fill:#2595FF;}` 
`<line fill="#2595FF" x1="27.8" y1="80.5" x2="39" y2="80.5"/>` 

我不熟悉SVG和设计工具，也不拥有Adobe Illustrator的许可证。我所拥有的就是这个SVG的大文件。是否有我手动做的工具？是否有一个工具（如CSS内联）可以自动内联生成的类？

Answer 1

在从Illustrator中保存的svg选项中，在CSS属性菜单中选择“样式属性”。这种方式插画将内联样式直接标记

Answer 2

您的描述明显违反CSS规则。任何符合要求的编辑器都会解释CSS级联，并且选择某个类的最后一个样式规则会获胜。

幸运的是，你遇到的不是标准符合标准。您可以试试以下内容

1. 用Inkscape打开文件，它是免费的。

2. 打开编辑 - > XML编辑器。在左侧的树视图中，选择根svg元素。

3. 在右侧的属性视图中，单击任何属性行。在下面的部分，右键单击“设置”按钮。

   在一个简短的测试中，我刚才那样触发了样式的内联，并且令人惊讶地给与同一类的元素赋予不同的填充属性，就像人工智能所预期的那样。

4. 另存为“Plain SVG”。