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未显示

回答

相关问题