通过webapp

时间：2015-09-17 05:37:23

标签： html svg safari

我在以下简单示例

中复制了我的问题

我有一个简单的网页，如下所示：

<html>
    <head></head>
    <body>  
        <img src="icons.svg#close"></img>
        <br>
        <img src="icons.svg#error"></img>
    </body>
</html>

在Safari中本地查看此页面，页面呈现正确：

Correct rendering

错误图标上方显示关闭图标。

但是，当我使用NodeJS webapp（或使用python SimpleHTTPServer命令）提供文件并在Safari中查看时，图像就在彼此的位置：

In correct rendering

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

无论文件是在本地加载还是通过服务器提供，都可以在所有其他浏览器中正确呈现页面。

1 个答案:

答案 0 :(得分：4)

这是由于Safari中的SVG片段CSS支持不完整/错误。浏览器对此技术的支持仍然相对不完整 - 请参阅https://css-tricks.com/svg-fragment-identifiers-work/

  

当前版本的Chrome / Safari / Opera（38/8/25）可以很好地处理所有HTML技术，但没有一种CSS技术，包括背景位置。

以下是我的Safari 8（左）和Chrome（右）如何呈现测试页面 - 请注意每次图标都应该enter image description here：

enter image description here

您的内容的一些实验如下：

如果我第二次重复这对图像，第四张图像就是两者的合成（左下图）。没有解释你的svg应该能够产生这样的图像。有趣的是，如果你使用不同的样式属性，我会得到完全相同的分割，例如不透明度（右下方）：

enter image description here opacity version

如果我使用 cmd + + 和 cmd + - 进行放大和缩小，则重叠和部分重叠图像发生了变化。

enter image description here enter image description here

调整页面大小也会产生影响。

推测图像的样式可能会以某种方式相互影响，我尝试使用图像的四个不同副本（icons1.svg#close，icons2.svg#error等）并分别引用它们。这主要解决了这个问题，但第四张图片却错过了最后三个季度。但是，只要我调整窗口大小，图像的缺失部分就会出现。

底线：不完整/错误的svg片段标识符/ CSS处理。

相关问题
最新问题