为什么没有哈希的 SVG 片段标识符不起作用？答案

【问题标题】：Why do SVG fragment identifiers without hash not work?为什么没有哈希的 SVG 片段标识符不起作用？
【发布时间】：2022-05-06 19:38:14
【问题描述】：

SVG 片段标识符用于链接到 SVG 文档的特定视图。它们在Secion 17.3.2 of the SVG specification 1.1 中定义。

通常它们具有MyDrawing.svg#MyView 的形式，其中散列后的部分指定链接文档中元素的ID。但在我的理解中，没有像 MyDrawing.svg 这样的散列的片段标识符也应该被允许。

这是规范中所说的：

"如果没有提供 SVG 片段标识符（例如，指定的 IRI 不包含“#”字符，例如 MyDrawing.svg），则使用视图规范属性建立 SVG 文档的初始视图（即, 'viewBox' 等) 在最外层的 svg 元素上。"*

测试用例

如果使用链接到两个 SVG 文件的 HTML 文件为此设置了一个小测试。第一个文件是使用片段标识符img1.svg#id1 的链接，第二个文件是使用标识符img2.svg 链接的文件：

index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Fragment Identifier Test</title>
        </head>
        <body>
            <h2>With Hash</h2>
            <div>
                <svg style="width: 128px; height: 128px;">
                    <use xlink:href="img1.svg#id1"></use>
                </svg>
            </div>
            <h2>Without Hash</h2>
            <div>
                <svg style="width: 128px; height: 128px;">
                    <use xlink:href="img2.svg"></use>
                </svg>
            </div>
        </body>
    </html>

img1.svg（svg 元素有一个 id）

    <svg id="id1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,512,512">
        <circle cx="256" cy="256" r="200" fill="green" />
    </svg>

img2.svg（svg 元素没有 id）

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,512,512">
        <circle cx="256" cy="256" r="200" fill="red" />
    </svg>

有什么问题

所有浏览器只显示第一个 SVG。

我的问题是什么？

我的第一个问题是：我理解正确吗，根据 SVG 规范，没有哈希的片段标识符应该是可能的？

我的第二个问题：我在测试用例中做错了什么还是浏览器不支持这个？

我们为什么要这个？

在我看来，使用不带哈希的片段标识符链接 SVG 文档将是将单个 SVG 图像添加到 HTML 文档的圣杯。原因是：

将 SVG 图像包含到 HTML 文档中的简单语法
没有不必要的 ID 使 DOM 混乱
能够使用 CSS 变量设置 SVG 样式（如 this article on Medium 所示）。

简而言之，我们终于可以使用可以存储在单个外部文件中的完全 CSS 样式的矢量图形了。没有注入，没有混乱的 DOM ID。

【问题讨论】：

标签： svg

【解决方案1】：

片段标识符是everything after a hash。 MyDrawing.svg 根本不是片段标识符。

在 SVG 1.1 中，<use> 元素不能指向 complete file，即 MyDrawing.svg

与“image”不同，“use”元素不能引用整个文件。

SVG 2 提议取消该限制，但目前还没有浏览器实现 SVG 2 的该部分。除非至少有 2 个浏览器实现了更改，否则 SVG 2 规范将不得不恢复为 SVG 1.1 文本。

要在 SVG 1.1 中执行此操作，您需要按照规范本身的建议使用 <image> 元素。或者，如果您想使用 <use> 元素，请将 id 放在根元素上，并将 <use> 元素指向该元素。

【讨论】：

谢谢罗伯特。不幸的是，使用图像似乎不适用于 CSS 变量，因此唯一的选择是使用 id 和片段标识符。
我希望这个（<use> 不能指向完整的文件）被记录在 MDN 或 W3C 学校。