使用 USE 标签访问外部 SVG 图形答案

【问题标题】：Accessing external SVG graphics with the USE tag使用 USE 标签访问外部 SVG 图形
【发布时间】：2013-02-08 06:10:43
【问题描述】：

亲爱的堆栈溢出，

我正在尝试引用驻留在不同 SVG 文件中的单个 SVG 图形通过主 HTML5 页面中的标签和 ID 号。

我希望能够在 HTML 页面中的使用标签上添加 onclicks，以便进行多项选择测验（然后保留我知道该怎么做的分数），图形会很庞大。因此，这些需要在外部 svg 文件中。

然而，在这里，我使用了一个简单的矩形来使我的问题更容易关注

这是我的 HTML

<html>
<head></head>

<body>

<svg>  
<use xlink:href="LINK.svg#link" />
</svg>
</body>
</html>

这是我的 SVG

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g id="link">
 <rect x="0" y="0" width="50" height="50" style="fill:red"/>
</g>
</svg>

这完全符合我在 Firefox 和 Opera 中的要求。但是，它在 Chrome 或 Safari 中不起作用。不确定 Internet Explorer

是否有其他方法可以让我从外部访问 SVG 数据，以及来自 HTML 主页面的脚本（因为我希望可以保留分数在多个 SVG 元素上）

【问题讨论】：

bugs.webkit.org/show_bug.cgi?id=91237

标签： svg

【解决方案1】：

您可以使用<object> 标签访问您的SVG。 This link 向您展示如何从 html 到 SVG 编写脚本，反之亦然。

【讨论】：

这在一定程度上是有效的。但是，我想在“相框”中插入多个外部图形，然后更改“minisvgs”的尺寸和位置以制作一张大图。我还想在每个上放置一个单独的 onclick、onmouseovers 和 css 悬停'minisvg'
那么是什么阻止了你？由于您使用的是对象标记，因此您必须在 svg 对象中执行所有 onclick、onmouseover 和 css 悬停操作，还有其他问题吗？