如何解决为外部SVG配置Angular项目
我是Angular的新手,并且正在使用我创建的一些SVG。我在外部文件中有这些SVG。虽然我可以通过在xlink:href中键入整个url来在component.html文件中看到svg,但我试图在angular.json文件中设置“资产”配置,所以我不必键入整个网址,并使其更加简洁。我已经在线跟踪了几个示例,包括几个StackOverflow线程,在我生命中,我无法使用其中的任何一个。
我通过CLI创建了一个Angular 10项目。这是文件夹结构:
- src
- 应用
- 父文件夹
- 子文件夹
- test.component.html
- 子文件夹
- shapes.svg
- 子文件夹
- 父文件夹
- 应用
在angular.json文件的“ assets”属性中,我具有:
"assets": [
"src/favicon.ico","src/assets","src/app/ParentFolder/shapes.svg"
],
在我的test.component.html文件中
<svg width="100" height="100">
<use xlink:href="shapes.svg#myCircle" fill="blue" ></use>
</svg>
我没有得到任何编译或运行时错误,尝试使用这种方法时,不会出现svg。我也在使用Chrome。有人对我可能会缺少的东西有任何想法吗?让我知道是否需要进一步说明。
先谢谢您, 肖恩
解决方法
尝试使用此方法时,不会显示svg。
当您在Chrome中检查网站时,它是否不会呈现给DOM?
尝试使用以下内容包装SVG:<object><embed></embed></object>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。