SVG精靈：符號轉換爲單SVG圖標

我有一個SVG精靈類似如下：SVG精靈：符號轉換爲單SVG圖標

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;"> 
    <symbol viewBox="0 0 500 500" id="test-icon"><title>test</title><ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/> 
     <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/> 
     <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/> 
    </symbol> 
    <symbol viewBox="0 0 500 500" id="test-icon"><title>test</title><ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/> 
     <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/> 
     <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/> 
    </symbol> 
    <symbol viewBox="0 0 500 500" id="test-icon"><title>test</title><ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/> 
     <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/> 
     <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/> 
    </symbol> 
</svg>

現在我的問題是：我能不能做一個SVG出來的符號，只是通過提取符號然後用svg-tag替換符號標記？或者我該如何實現這種轉換來分離svg？

我想到了一個小腳本，它可以像上面那樣從svg-sprite注入幾個svg圖標，所以這些圖標可以更好地/單獨地通過css風格。

這裏的事情是，在精靈有符號，這（只要我讀）只能用於<use xlink:href>。但是，然後該圖標不能單獨樣式，就像內聯svg可能（因爲它是一個克隆）。

編輯： 我發現，使用了IMG-src和單svgs注入到HTML開放的標誌性svgIncetor。另外要提到的是，我alread克里斯Coyier閱讀下面的文章：

基本上，我想結合的工藝用在那裏有一個圖標系統，可以有基於css和icon-sprite的多色圖標（內聯svg到js-注入）。開放標誌性的注射器只能注入單純的svgs，而不能從sprites afaik注入。

來源

2015-01-08 Skullcrasher

沒有你需要改變很多（見http://jsfiddle.net/yo8bhxfu/）：

從SVG元素刪除視圖框
適應SVG元素的樣式，所以它是可見的，並指定適當的大小（從符號的視圖框取）
轉換的symbol標籤爲g標籤

如果您另外刪除類別屬性，ID屬性和標題，則可能會在安全方面。

<svg xmlns="http://www.w3.org/2000/svg" style="width:500px; height:500px;"> 
    <g viewBox="0 0 500 500" id="test-icon"> 
     <title>test</title> 
     <ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/> 
     <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/> 
     <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/> 
    </g> 
</svg>

來源

2015-01-08 14:23:24 Codo

svg只是一個包裝多個符號，只是增加了一些，所以它看起來更像真正的精靈。但是我可以從你的答案中得出結論，基本上，用g標籤替換符號標籤並沒有問題，我很好。 – Skullcrasher

雖然這並不完全相同，符號更像

確實'viewBox'在'g'元素上是無效的。你可能想要'svg'元素？ – geedubb

SVG精靈：符號轉換爲單SVG圖標

回答

相關問題