我有一个 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/