SVG精靈不工作 - 圖標，對本文<a href="https://css-tricks.com/svg-fragment-identifiers-work/" rel="nofollow noreferrer">How SVG Fragment Identifiers Work</a>靈感來自堆

Question

顯示，我想創建SVG精靈，並在使用視框位置的選擇圖標到樣式作爲一個背景...

不幸的是我曾經遇到過一個真正的問題...我不能選擇適當的圖標來顯示，因爲所有的圖標都放在堆棧上，並相互覆蓋...

我試圖使用座標x & y分隔圖標組，但Web瀏覽器中沒有任何結果（它們仍然在堆棧中），但是當我將Sprite文件放入Sketch/AI時，它們是分開的。

<view id="icon-facebook" viewBox="0 0 24 24" /> 
<view id="icon-instagram" viewBox="0 24 24 24" /> 

<g id="icon-instagram" fill="red"> 
    <path fill-rule="nonzero" d="M17.2808471,0 L6.58644706,0 C2.95468235,0 0,2.95482353 0,6.58658824 L0,17.2809882 C0,20.9128941 2.95468235,23.8675765 6.58644706,23.8675765 L17.2808471,23.8675765 C20.9128941,23.8675765 23.8675765,20.9127529 23.8675765,17.2809882 L23.8675765,6.58658824 C23.8677176,2.95482353 20.9128941,0 17.2808471,0 Z M21.7500706,17.2809882 C21.7500706,19.7452235 19.7452235,21.7499294 17.2809882,21.7499294 L6.58644706,21.7499294 C4.12235294,21.7500706 2.11764706,19.7452235 2.11764706,17.2809882 L2.11764706,6.58658824 C2.11764706,4.12249412 4.12235294,2.11764706 6.58644706,2.11764706 L17.2808471,2.11764706 C19.7450824,2.11764706 21.7499294,4.12249412 21.7499294,6.58658824 L21.7499294,17.2809882 L21.7500706,17.2809882 Z"/> 
    <path fill-rule="nonzero" d="M11.9337882 5.784C8.54258824 5.784 5.78371765 8.54287059 5.78371765 11.9340706 5.78371765 15.3251294 8.54258824 18.0838588 11.9337882 18.0838588 15.3249882 18.0838588 18.0838588 15.3251294 18.0838588 11.9340706 18.0838588 8.54287059 15.3249882 5.784 11.9337882 5.784zM11.9337882 15.9660706C9.7104 15.9660706 7.90136471 14.1573176 7.90136471 11.9339294 7.90136471 9.7104 9.71025882 7.90150588 11.9337882 7.90150588 14.1573176 7.90150588 15.9662118 9.7104 15.9662118 11.9339294 15.9662118 14.1573176 14.1571765 15.9660706 11.9337882 15.9660706zM18.3417882 3.98837647C17.9337882 3.98837647 17.5329882 4.15355294 17.2448471 4.44296471 16.9552941 4.73096471 16.7888471 5.13190588 16.7888471 5.54131765 16.7888471 5.94945882 16.9554353 6.35025882 17.2448471 6.63967059 17.5328471 6.92767059 17.9337882 7.09425882 18.3417882 7.09425882 18.7512 7.09425882 19.1507294 6.92767059 19.4401412 6.63967059 19.7295529 6.35025882 19.8947294 5.94931765 19.8947294 5.54131765 19.8947294 5.13190588 19.7295529 4.73096471 19.4401412 4.44296471 19.1521412 4.15355294 18.7512 3.98837647 18.3417882 3.98837647z"/> 
</g> 

<g id="icon-facebook" fill="pink" > 
    <path d="M2.93630055,4.93539414 L2.93630055,8.17223941 L0.564884222,8.17223941 L0.564884222,12.1302664 L2.93630055,12.1302664 L2.93630055,23.8921306 L7.80769311,23.8921306 L7.80769311,12.1305943 L11.0766237,12.1305943 C11.0766237,12.1305943 11.3827734,10.2327507 11.5311748,8.15764524 L7.82611347,8.15764524 L7.82611347,5.45138285 C7.82611347,5.04690017 8.35724295,4.50281631 8.88219587,4.50281631 L11.5363128,4.50281631 L11.5363128,0.382285714 L7.92761676,0.382285714 C2.81588497,0.382012415 2.93630055,4.34397487 2.93630055,4.93539414 Z"/> 
</g> 

JSfiddle with the problem

Answer 1

有幾件事錯在這裏。

顯然其中一個是你的圖標不在正確的位置。

第二個是視圖ID。文件中的ID必須是唯一的，但是您有兩個名爲"icon-facebook"等。這就是爲什麼該教程頁使用-view後綴爲視圖ID。例如。 icon-clock-view。

對於第一個問題，您可能通常會設計文件，以便將圖標排列在網格中。我不確定你是如何創建你的文件的，爲什麼它不能這樣工作。要解決該問題，您可以在矢量編輯器中編輯文件，也可以手動將transform添加到受影響的圖標，以將它們移動到正確的位置。

由於您的視圖定義顯示Instagram圖標位於（0,24）（這是viewBox中的前兩個值），因此我們應該將該圖標向下移動到此位置。

<g id="icon-instagram" fill="red"> 
    <g transform="translate(0,24)"> 
    <path ... /> 

請注意，Instagram圖標由兩條路徑組成。因此，我不是將transform添加到兩個路徑中，而是將它們包裹在組標記中，並將轉換應用到該標記。

下面是修改SVG：

<?xml version="1.0" encoding="utf-8"?> 
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 48" enable-background="new 0 0 24 48" xml:space="preserve"> 
 

 
    <view id="icon-facebook-view" viewBox="0 0 24 24" /> 
 
    <view id="icon-instagram-view" viewBox="0 24 24 24" /> 
 

 
    <g id="icon-instagram" fill="red"> 
 
     <g transform="translate(0,24)"> 
 
     <path fill-rule="nonzero" d="M17.2808471,0 L6.58644706,0 C2.95468235,0 0,2.95482353 0,6.58658824 L0,17.2809882 C0,20.9128941 2.95468235,23.8675765 6.58644706,23.8675765 L17.2808471,23.8675765 C20.9128941,23.8675765 23.8675765,20.9127529 23.8675765,17.2809882 L23.8675765,6.58658824 C23.8677176,2.95482353 20.9128941,0 17.2808471,0 Z M21.7500706,17.2809882 C21.7500706,19.7452235 19.7452235,21.7499294 17.2809882,21.7499294 L6.58644706,21.7499294 C4.12235294,21.7500706 2.11764706,19.7452235 2.11764706,17.2809882 L2.11764706,6.58658824 C2.11764706,4.12249412 4.12235294,2.11764706 6.58644706,2.11764706 L17.2808471,2.11764706 C19.7450824,2.11764706 21.7499294,4.12249412 21.7499294,6.58658824 L21.7499294,17.2809882 L21.7500706,17.2809882 Z"/> 
 
     <path fill-rule="nonzero" d="M11.9337882 5.784C8.54258824 5.784 5.78371765 8.54287059 5.78371765 11.9340706 5.78371765 15.3251294 8.54258824 18.0838588 11.9337882 18.0838588 15.3249882 18.0838588 18.0838588 15.3251294 18.0838588 11.9340706 18.0838588 8.54287059 15.3249882 5.784 11.9337882 5.784zM11.9337882 15.9660706C9.7104 15.9660706 7.90136471 14.1573176 7.90136471 11.9339294 7.90136471 9.7104 9.71025882 7.90150588 11.9337882 7.90150588 14.1573176 7.90150588 15.9662118 9.7104 15.9662118 11.9339294 15.9662118 14.1573176 14.1571765 15.9660706 11.9337882 15.9660706zM18.3417882 3.98837647C17.9337882 3.98837647 17.5329882 4.15355294 17.2448471 4.44296471 16.9552941 4.73096471 16.7888471 5.13190588 16.7888471 5.54131765 16.7888471 5.94945882 16.9554353 6.35025882 17.2448471 6.63967059 17.5328471 6.92767059 17.9337882 7.09425882 18.3417882 7.09425882 18.7512 7.09425882 19.1507294 6.92767059 19.4401412 6.63967059 19.7295529 6.35025882 19.8947294 5.94931765 19.8947294 5.54131765 19.8947294 5.13190588 19.7295529 4.73096471 19.4401412 4.44296471 19.1521412 4.15355294 18.7512 3.98837647 18.3417882 3.98837647z"/> 
 
     </g> 
 
    </g> 
 

 
    <g id="icon-facebook" fill="pink" > 
 
     <path d="M2.93630055,4.93539414 L2.93630055,8.17223941 L0.564884222,8.17223941 L0.564884222,12.1302664 L2.93630055,12.1302664 L2.93630055,23.8921306 L7.80769311,23.8921306 L7.80769311,12.1305943 L11.0766237,12.1305943 C11.0766237,12.1305943 11.3827734,10.2327507 11.5311748,8.15764524 L7.82611347,8.15764524 L7.82611347,5.45138285 C7.82611347,5.04690017 8.35724295,4.50281631 8.88219587,4.50281631 L11.5363128,4.50281631 L11.5363128,0.382285714 L7.92761676,0.382285714 C2.81588497,0.382012415 2.93630055,4.34397487 2.93630055,4.93539414 Z"/> 
 
    </g> 
 
</svg>

你將引用的圖標是這樣的：

<img src="sprite.svg#icon-facebook-view"> 
<img src="sprite.svg#icon-instagram-view">