Question

使用md-icon加载的

addSvgIconSetInNamespace出现在DOM中但不可见。

我的svg：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <symbol id="thumb" width="100%" height="100%" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path>
    </symbol>
</svg>

我的TS：

iconRegistry.addSvgIconSetInNamespace(
  'withSymbols',
  sanitizer.bypassSecurityTrustResourceUrl('withSymbols.svg')
);

我做了一个傻瓜来证明这个问题：https://plnkr.co/edit/KYyfI0uBq2GYM2ElC1k3?p=preview

Answer 1

<symbol>标记被复制到DOM，如果没有<use>标记，则无法呈现：

符号元素本身未呈现。只有符号的实例   元素（即，元素对符号的引用）被渲染。

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

在引用the docs后，我设法通过修改我的svg文件以包含<defs>代码并将我的所有<symbol>代码重命名为{{1}来设法使其正常工作}：

<svg>

更新了plunkr：https://plnkr.co/edit/jHtKsmqrXXxoVF8tJhNb?p=preview

使用addSvgIconSetInNamespace加载的md-icon出现在DOM中但不可见

1 个答案: