当通过webapp提供服务时,SVG片段标识符在Safari中交换
我在下面的简单示例中复制了我的问题
我有一个简单的网页,如下所示:
<html>
<head></head>
<body>
<img src="icons.svg#close"></img>
<br>
<img src="icons.svg#error"></img>
</body>
</html>
在Safari中本地查看此页面,页面呈现正确:
其中关闭图标显示在错误图标上方.
但是,当我使用NodeJS webapp(或使用python SimpleHTTPServer命令)提供文件并在Safari中查看它时,图像在彼此的位置:
即使dom看起来仍然正确,src每个img标签的属性都保持正确的路径.
这是icons.svg文件:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>:root>svg{display:none}:root>svg:target{display:block}</style>
<svg viewBox="0 0 12 12" enable-background="new 0 0 12 12" id="close">
<path d="M7.2 6l4.5-4.4c.4-.4.4-.9 0-1.3s-.9-.4-1.3 0L6 4.7 1.6.3C1.2-.1.7-.1.3.3s-.4.9 0 1.3L4.7 6 .3 10.4c-.4.4-.4.9 0 1.3.2.2.4.3.6.3s.5-.1.7-.3L6 7.3l4.4 4.4c.2.2.4.3.7.3.2 0 .5-.1.7-.3.4-.4.4-.9 0-1.3L7.2 6z" opacity=".3" enable-background="new"/>
</svg>
<svg viewBox="0 0 58 46" enable-background="new 0 0 58 46" id="error">
<style type="text/css">.st0{fill:#ff9141}.st1{fill:#fff}</style>
<path class="st0" d="M30.6 1c-.9-1.4-2.3-1.4-3.2 0L.4 43.5C-.5 44.9.2 46 1.8 46h54.4c1.7 0 2.3-1.1 1.4-2.5L30.6 1z"/>
<path class="st1" d="M26.3 15.2h5.5V30h-5.5zM26.3 33.5h5.5v5.3h-5.5z"/>
</svg>
</svg>
无论文件是在本地加载还是通过服务器提供,都可以在所有其他浏览器中正确呈现页面.
这是由于 Safari 中的 SVG 片段 CSS 支持不完整/有问题。浏览器对此技术的支持仍然相对不完整 - 请参阅https://css-tricks.com/svg-fragment-identifiers-work/
当前版本的 Chrome/Safari/Opera (38/8/25) 可以很好地处理所有 HTML 技术，但不能处理任何 CSS 技术，包括背景位置技术。
以下是我的 Safari 8（左）和 Chrome（右）呈现测试页面的方式 - 请注意，图标应该消失
每次：
对您的内容进行的一些实验如下：
如果我第二次重复这对图像，第四个图像在某种程度上是两个图像的合成（左下）。对 svg 的任何解释都不应该能够生成这样的图像。有趣的是，如果您使用不同的样式属性，例如不透明度（右下），我会得到完全相同的分割：
cmd如果我用++和cmd+放大和缩小-，重叠和部分图像会发生变化。
调整页面大小也会产生影响。
推测图像的样式可能以某种方式相互交互，我尝试拥有图像的四个不同副本（icons1.svg#close等icons2.svg#error）并分别引用它们。这基本上解决了问题，但第四张图像缺少底部四分之三。然而，当我调整窗口大小时，图像缺失的部分就出现了。
底线：不完整/有缺陷的 svg 片段标识符/CSS 处理。