html – SVG片段标识符在Safari中通过webapp进行交换

html – SVG片段标识符在Safari中通过webapp进行交换,第1张

概述我已经在以下简单的例子中复制了我的问题 我有一个简单的网页,如下所示: <html> <head></head> <body> <img src="icons.svg#close"></img> <br> <img src="icons.svg#error"></img> </body></html> 在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仍然看起来正确,每个img标签的src属性保持正确的路径.

这是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  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  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/

Current versions of Chrome/SafarI/Opera (38/8/25) handle all the HTML techniques well,but none of the CSS techniques,including the background-position one.

以下是我的Safari 8(左)和Chrome(右)呈现测试页面 – 请注意,图标应该每次都要:

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

如果我第二次重复这对图像,第四个图像是以两种方式(左下方)的复合形式.您的svg的解释不应该能够产生像这样的图像.有趣的是,如果您使用不同的样式属性,我将获得完全相同的分割.不透明度(右下):

如果我用cmd和cmd放大和缩小,则重叠和部分图像会发生变化.

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

推测图像的样式可能会以某种方式相互影响,我尝试使用四个不同的图像副本(icons1.svg#close,icons2.svg#error等)并单独引用它们.这主要是解决了这个问题,但是第四个图像在底部三个季度都没有出现.然而,一旦我调整窗口大小,图像的缺失部分就出现了.

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

总结

以上是内存溢出为你收集整理的html – SVG片段标识符在Safari中通过webapp进行交换全部内容,希望文章能够帮你解决html – SVG片段标识符在Safari中通过webapp进行交换所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1094829.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存