为什么没有散列的SVG片段标识符不起作用？_Svg

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

svg

为什么没有散列的SVG片段标识符不起作用？,svg,Svg,SVG片段标识符用于链接到SVG文档的特定视图。它们在中定义通常它们的格式是MyDrawing.svg#MyView，其中散列后面的部分指定链接文档中元素的id。但在我的理解中，也应该允许没有散列的片段标识符，比如MyDrawing.svg 以下是规格说明： “如果未提供SVG片段标识符（例如，指定的IRI不包含“#”字符，如MyDrawing.SVG），则使用最外层SVG元素上的视图规范属性（即“viewBox”等）建立SVG文档的初始视图。” 测试用例如果您已经为此设置了一个小测试，它使

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

通常它们的格式是

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）

img2.svg（svg元素没有id）

问题出在哪里

所有浏览器仅显示第一个SVG

我的问题是什么？

我的第一个问题是：我是否正确理解了它，根据SVG规范，不带散列的片段标识符应该是可能的

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

我们为什么想要这个？

在我看来，使用不带散列的片段标识符链接SVG文档将是向HTML文档添加单个SVG图像的圣杯。原因是: -用于将SVG图像包含到HTML文档中的简单语法 -没有不必要的ID干扰DOM -能够使用CSS变量设置SVG样式（如中所示）

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

需要一个片段标识符。MyDrawing.svg根本不是片段标识符

在SVG 1.1中，

元素不能指向一个，即MyDrawing.SVG

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

SVG2建议取消这一限制，但目前还没有浏览器实现SVG2的这一部分。SVG 2规范必须还原为SVG 1.1文本，除非至少有两个浏览器实现了此更改

要在SVG1.1中实现这一点，需要使用规范本身建议的

元素。或者，如果要使用

元素，请在根元素上放置一个id，并将

元素指向该元素。

谢谢。不幸的是，使用图像似乎无法处理CSS变量，因此唯一的选择是使用id和片段标识符。我希望这（

不能指向完整的文件）在MDN或W3C学校中有文档记录。

    <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>

    <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>