SVG：当 SVG 在对象内部时访问 HTML 中的 defs 项目？

Question

假设我有一个具有以下定义的 SVG：

<svg width="179" height="170" viewBox="0 0 179 170" xmlns="http://www.w3.org/2000/svg">
    <title>Star 1</title>
    <defs>
        <g id="shape">
            <rect x="50" y="50" width="50" height="50" />
        </g>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <path stroke="#979797" fill="#D8D8D8" d="M89.5 140.25l-54.958 28.893 10.496-61.196L.576 64.607l61.445-8.93L89.5 0l27.48 55.678 61.444 8.93-44.462 43.34 10.496 61.195z" />
    </g>
</svg>

我使用对象标签将该 SVG 包含在 HTML 文档中。例如：

<object type="image/svg+xml" data="star.svg" class="svgObjectWrapper">
  Your browser doesn't support SVG
</object>

在 HTML 文档中，有什么方法可以 reference/use 来自 SVG 的定义（它又在对象内部）。例如，这似乎不起作用。这应该是可能的吗？

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

我的猜测是否定的，但我想确定一下。

Answer 1

在支持它的 UA 上是可能的（例如 Firefox 支持），如果您只想通过 <use>.

引用文档，您甚至不需要对象标签

根据 SVG 规范，您只需放入要使用数据的文件的 URL，即

<use xlink:href="star.svg#shape" x="50" y="50" />

star.svg 必须与您的 html 文件位于同一域中。

SVG：当 SVG 在对象内部时访问 HTML 中的 defs 项目？

SVG: access defs item in HTML when SVG inside Object?

svg

object