Question

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

中定义

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

这是规范说的：
＆＃34;如果没有提供SVG片段标识符（例如，指定的IRI不包含＆＃34;＃＆＃34;字符，例如MyDrawing.svg），那么初始视图进入SVG文档在最外面的svg元素上使用视图规范属性（即'viewBox'等）建立。＆＃34;

测试用例

如果使用链接到两个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。

Answer 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>元素指向该元素。

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

1 个答案: