html - SVG "use"不显示

标签 html svg

我有一个 SVG 图标,我需要在一个页面的多个工具栏中使用它。

如果我将 SVG 代码添加到工具栏中的位置,它就可以工作。但是,由于我需要多次使用它,所以我尝试将其定义在页面底部,然后使用“使用”将其显示在多个位置。

所以我这样定义:

<svg>
 <defs>
  <g id="svgHelp" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
  <path d="M1 12c0-6.075 4.925-11 11-11s11 4.925 11 11-4.925 11-11 11-11-4.925-11-11z"/>
  <path d="M11.792 14v-1c1.609 0 3-1.391 3-3s-1.391-3-3-3c-1.194 0-2.342.893-2.792 1.921"/>
  <path d="M12 17v1"/>
  </g>
 </defs>
</svg>

然后尝试使用它:

  <use xlink:href="#svgHelp" x="0" y="0" />

但是不显示。我在这里缺少什么?

最佳答案

我相信<use>必须是 wrapped通过 <svg>

<svg>
  <use xlink:href="#svgHelp" x="0" y="0" />
</svg>

关于html - SVG "use"不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35630266/

相关文章:

javascript - 如何标记 svg 多边形

javascript - 如何强制用户使用正则表达式和 javascript 在输入字段中输入特定模式

HTML 注释标记

javascript - html 中对象标签的 data 属性没有更新新的 url

SVG 上的 CSS transform-origin 总是 (0,0)

jquery - 翻转 SVG 图像在 Safari 和 IE 中调整大小

html - 我可以将 HTML 嵌入到 HTML5 SVG 片段中吗?

html - 网站样式 - 图像的一部分在调整大小之前不会显示

html - 如何在 h :panelgrid 中的两个特定列之间留出空间

jquery - 预加载脚本 - 在页面加载之前更改 SVG 填充颜色