使用< use>显示外部SVG标签和href或xlink:href属性? [英] Display external SVG with <use> tag and href or xlink:href attribute?

问题描述

从< use> 标记加载SVG时，显示不正确.我添加了一个img标签来说明预期的结果.

The SVG is not display correctly when it is loaded from <use> tag. I've added an img tag to illustrate the expected result.

代码示例:

    <svg>
      <use xlink:href="file.svg" href="file.svg"></use>
    </svg>
    <img src="file.svg" />  

当前输出:

工作中的小提琴:演示

感谢任何指出我的错误的人.

Thank to anyone who can point out my mistake.

推荐答案

1. 您遇到此错误:不安全的尝试从具有URL https://......的框架中加载URL https:... svg.域，协议和端口必须匹配

1. You have this error: Unsafe attempt to load URL https:.....svg from frame with URL https://...... Domains, protocols and ports must match

您需要使用要使用的svg对象的ID

You need to use the id of the svg object you want to use

  <svg viewBox="0 0 14 16" width="50">
    <use xlink:href="sof.svg#id" fill="red"/>
  </svg>

请查看以下示例: https://codepen.io/enxaneta/project/editor/91143c063e6b9abf1b5c43a14a9937ea

这篇关于使用< use>显示外部SVG标签和href或xlink:href属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！