html - 为什么 SVG 中的 元素不起作用？

Question

我有以下简单示例。它存储在 image.svg 中:

<svg>
  <defs>
    <g id="shape">
      <circle cx="100" cy="100" r="100" />
    </g>
  </defs>
</svg>

但是，将此代码放入 HTML 文件中不会加载任何内容。这是为什么？

<svg>
  <use xlink:href="#shape" x="10" y="10" />
</svg>

我做错了什么？我似乎无法让它发挥作用。

Answer 1

如果您使用其他文档中的元素，则必须指定文档!

<use xlink:href="#shape" x="10" y="10" />

这意味着“使用当前文档中的 #shape 元素”。

要从另一个文档导入，您需要将对 SVG 文件的引用放在 xlink:href 属性中:

<use xlink:href="image.svg#shape" x="10" y="10" />

显然你需要检查这里的路径是否正确。请注意，尽管 polyfill 可用，但任何版本的 Internet Explorer 都不支持此功能。