无法获得SVG使用以加载plunkr

时间:2017-09-02 14:04:47

标签: angular typescript svg

我试图孤立地展示边缘案例问题,其中svg的使用标签在某些条件下不会从href加载外部资产。

我尝试在plunkr中运行此功能以分享我的问题并寻找解决方案,但无法使用finded[j_index]=NULL;标记将图像加载到所有

以下是角度模板的代码:

<use>

<svg xmlns="http://www.w3.org/2000/svg" focusable="false" [attr.height]="height" [attr.width]="width" [attr.viewbox]="viewbox"> <use #use [attr.viewbox]="viewbox" attr.href="{{ path || 'icon.svg' }}" attr.width="100%" attr.height="100%"> </use> </svg> 发布在以下位置:

icon.svg

如何在plunkr上使用<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg> 显示svg?

这是一个问题吗? 我误解了如何使用<svg><use href="…">

https://embed.plnkr.co/TW7yM6EIW7PoFyKyudvE/

1 个答案:

答案 0 :(得分:0)

<use>元素不能指向完整的svg文件,它们需要指向该文件中的某个元素。

  

Unlike ‘image’, the ‘use’ element cannot reference entire files.