自動內嵌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」。