Question

假设我有一个具有以下defs的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>

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

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

在HTML文档中，有没有办法从SVG中引用/使用那些defs（在对象内部）。例如，这似乎不起作用。这可能吗？

<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文件位于同一个域中。

Answer 2

由于＆lt; object＆gt;将svg加载到单独的文档中，您无法在顶层文档中使用本地引用（例如<use xlink:href="#shape"/>）来访问其他文档中的资源。可以使用＆lt; use＆gt;来引用外部资源。但是，例如<use xlink:href="star.svg#shape"/>。请注意，这并不意味着它与＆lt; object＆gt;中的文档相同，例如，如果您更改＆lt; object＆gt;内的元素。元素对<use xlink:href="star.svg#shape"/>没有影响。

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

2 个答案: