html5 svg未顯示

我是新來的html5 svg渲染。我嘗試這樣做：html5 svg未顯示

<svg width="200" height="200"> 
    <symbol viewBox="0 0 64 64" id="shape-phone"> 
     <title>phone</title> 
     <g> 
      <rect x="16" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="32" height="62"/> 
      <line fill="none" stroke-width="2" stroke-miterlimit="10" x1="28" y1="5" x2="36" y2="5"/> 
      <line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="51" x2="48" y2="51"/> 
      <line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="9" x2="48" y2="9"/> 
      <circle fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" cx="32" cy="57" r="2"/> 
     </g> 
    </symbol> 
</svg>

但是，這是行不通的。任何想法，如何修改以獲得它的工作？

更新：

試圖證明使用use也不起作用SVG的象徵。

<svg><use xlink:href="#shape-phone" x="0" y="0" width="100" height="50"/></svg>

來源

2017-03-15 Jayram Kumar

你定義一個<symbol>但你需要一個<use>顯示它：

<use xlink:href="#shape-phone" x="0" y="0" width="64" height="64" />

符號是一種模板，用來被重用一遍又一遍。 <symbol>標籤定義了可以用一個或多個<use>元素顯示的圖形內容。每個<use>都可以以任何方式進行轉換，但不能爲它們的內容設置不同的樣式，因爲內容更多地是符號中的鏈接，所以它沒有「真正」自己的DOM，可以對其進行樣式設置。

UPDATE

它可能發生，你需要包括在<svg>像這樣的xlink命名空間：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" …>…</svg>

符號沒有顯示出來，因爲沒有stroke集。

<svg width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 
    <symbol viewBox="0 0 64 64" id="shape-phone"> 
    <g> 
     <rect x="16" y="1" stroke="#00ff00" fill="none" stroke-width="2" stroke-miterlimit="10" width="32" height="62"/> 
     <line fill="none" stroke="#00ff00" stroke-width="2" stroke-miterlimit="10" x1="28" y1="5" x2="36" y2="5"/> 
     <line fill="none" stroke="#00ff00" stroke-width="2" stroke-miterlimit="10" x1="16" y1="51" x2="48" y2="51"/> 
     <line fill="none" stroke="#00ff00" stroke-width="2" stroke-miterlimit="10" x1="16" y1="9" x2="48" y2="9"/> 
     <circle fill="none" stroke="#00ff00" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" cx="32" cy="57" r="2"/> 
    </g> 
    </symbol> 
    <use xlink:href="#shape-phone" x="0" y="0" /> 
</svg>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

來源

2017-03-15 11:23:56 philipp

html5 svg未顯示

回答

相關問題