從另一個檔案匯入SVG元素，而不會丟失原始檔案中的CSS<style>

我需要創建許多 SVG 檔案，并且希望在一個檔案中保留一組常用符號并將它們匯入到其他檔案中。

我設法使用一個<use>元素來做到這一點：

<use href="common.svg#symbol1" />

問題是，如果common.svg有影響元素的 CSS 樣式，則該樣式在匯入元素的檔案中沒有影響。

我在 svgur.com 上上傳了兩個 SVG 來展示這個：

https://svgur.com/i/bYv.svg

...定義一個帶有 id 的圓，該圓的 idball受在其周圍設定紅色邊框的樣式影響。

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <style>#ball { stroke:#ff0000; stroke-width:10; }</style>
    <circle id="ball" cx="50" cy="50" r="45" />
</svg>

https://svgur.com/i/bXA.svg

...使用圓圈。圓圈可見，但邊框不可見。

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <use href="bYv.svg#ball" />
</svg>

問題：

1. 這是我正在使用的 SVG 渲染器的錯誤還是它應該如何表現？

   我嘗試過的每個渲染器（chrome、firefox、inkscape）都顯示相同的結果，所以我懷疑這可能是預期的行為。

2. 有什么方法可以從外部 SVG 檔案和影響它的 CSS 樣式中匯入元素，使其看起來與原始檔案中的完全一樣？

uj5u.com熱心網友回復：

1. 這是我正在使用的 SVG 渲染器的錯誤還是它應該如何表現？

這是預期的行為。CSS 規則不適用于跨檔案邊界。您正在將 SVG 匯入主檔案，但您的 CSS 位于另一個檔案中。

2. 有什么方法可以從外部 SVG 檔案中匯入元素以及影響它的 CSS 樣式...

不。

好吧，我想您可以在技術上撰寫一些 Javascript 來加載另一個檔案并提取 CSS 規則。但我強烈懷疑你不想這樣做。

您的 SVG“精靈檔案”不應在<style>標簽中包含 CSS 規則。

最好的方法是預先準備要用作精靈的 SVG。

我會做的是將您的匯入common.svg到矢量編輯器并將您的所有 CSS 屬性轉換為演示文稿屬性。例如，Illustrator 允許您在匯出 SVG 時選擇樣式設定方法。

你想要的是這樣的：

<svg>
  <style>
    .st0 {
      fill: red;
    }
  </style>

  <symbol id="whatever">
    <path d="..." class="st0"/>
  </symbol>
</svg>

要轉換為：

<svg>
  <symbol id="whatever">
    <path d="..." fill="red"/>
  </symbol>
</svg>

uj5u.com熱心網友回復：

根據可縮放矢量圖形 (SVG) 2 規范（W3C 編輯草案，2021 年 6 月 8 日），似乎應該在匯入元素的地方應用原始檔案的樣式。

第5.5節。“使用”元素：

克隆的內容從 'use' 元素繼承樣式，并且可以成為用戶事件的目標。但是，這些克隆的元素實體仍然鏈接到參考的源并反映原始元素中的 DOM 突變。此外，適用于參考元素范圍的所有樣式規則也適用于克隆的影子樹范圍。

和5.5.3。樣式范圍和繼承：

使用元素陰影樹與其他陰影樹一樣，表現出樣式封裝，如 CSS 作用域模塊 [css-scoping-1] 中所定義。這意味著影子樹中的元素從其宿主“use”元素繼??承樣式，但在外部檔案中定義的樣式規則與影子樹中的元素不匹配。相反，影子樹維護自己的樣式表串列，其 CSS 規則與影子樹中的元素相匹配。

當參考的元素來自外部檔案時，處理該檔案時生成的樣式表物件適用于 shadow tree，并且是只讀的。樣式表中的所有 URL 參考，包括僅片段參考，都必須是絕對的，相對于包含被參考元素的檔案的 URL。用戶代理可以為參考相同外部檔案的任何影子樹重用相同的樣式表物件。

所以是我嘗試過的瀏覽器和 SVG 渲染器不符合標準。

我仍在尋找一種在現有 SVG 用戶代理上模擬這種行為的方法。

uj5u.com熱心網友回復：

您的樣式將被應用，前提是您的 svg 資產代碼已行內

<svg style="display:none" class="svg-asset" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <style>
    #inline-ball { stroke:#ff0000; stroke-width:10; }
    </style>
    <circle id="inline-ball" cx="50" cy="50" r="45" />
</svg>


<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="#inline-ball" />
</svg>

如果您不想行內 svg 代碼，那么“片段識別符號”可能是更好的嵌入方法。

它基本上是一個精靈概念：
因此您的影像資產（如符號）需要在精靈窗格上放置一些 x 或 y 偏移量（與可以重疊放置的符號不同）。您實際上正在加載一個完整的 svg，包括嵌入的 css 樣式元素，但選擇一個特定的視圖框架。

請參閱 css.tricks.com 上的這篇文章
css.tricks.com: How SVG Fragment Identifiers Work

你的 svg 是這樣的

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 96" >
    <g id="icon01">
        <path d="M20.6,23.3L14,16.7V7.9h4v7.2l5.4,5.4L20.6,23.3z M16-0.1c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S24.8-0.1,16-0.1z  M16,27.9c-6.6,0-12-5.4-12-12s5.4-12,12-12s12,5.4,12,12S22.6,27.9,16,27.9z"/>
    </g>
    <g id="icon02">
        <path d="M32,43.2c0,2.7-1.2,5.1-3,6.8l0,0l-10,10c-1,1-2,2-3,2s-2-1-3-2l-10-10c-1.9-1.7-3-4.1-3-6.8c0-5.1,4.1-9.2,9.2-9.2c2.7,0,5.1,1.2,6.8,3c1.7-1.9,4.1-3,6.8-3C27.9,33.9,32,38.1,32,43.2z"/>
    </g>
    <view id="icon-clock-view" viewBox="0 0 32 32" />
    <view id="icon-heart-view" viewBox="0 32 32 32" />
</svg>

為了使用片段識別符號，我們需要添加<view>具有相應精靈區域坐標（在 viewBox 屬性中定義）的元素。
與符號定義不同，我們不在視圖元素中嵌套實際路徑資料。

通過將目標 ID 添加到我們的 src url 來嵌入到 html 中。

<img class="svg-fragment" src="fragment-ready-1.svg#icon-heart-view">

然而，在你的 html 中行內 svg 圖形，仍然提供最好的樣式控制。（例如，您網站 css 檔案中的樣式元素）
也許我們會在未來看到對遠程嵌入 svg 資產樣式的額外支持......在那之前我們仍然必須應對一些瀏覽器的怪癖。

標籤：css svg 进口 外部的 影子领域

上一篇：如何將這些SVG路徑制作成掩碼？

下一篇：Imagick沒有檢測到inkscape