svg在火狐、safari等浏览器展示不全，在google可以正常展示

原创 已于 2023-07-14 17:23:57 修改 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #bug

于 2023-07-13 19:38:23 首次发布
文章讲述了在非Google内核浏览器如火狐中，SVG元素显示不全的问题。经过排查，发现是g标签的filter属性在这些浏览器中引起的问题。尽管浏览器理论上支持相关属性，但实际表现存在差异，删除filter属性后解决了问题，但可能影响设计效果。作者对已支持属性仍出现兼容性问题表示疑惑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题每个浏览器展示不同的问题
svg在火狐、safari等非google内核的浏览器展示不全，在google内核可以正常展示

svg在火狐下的展示

svg在google下的展示

出现这个问题 开始的猜想: 每个浏览器厂商实现的方式有区别，导致svg中的属性在每个浏览器中得支持不一致，但是看了mdn之后发现火狐早已支持这些属性，所以只能慢慢试错，删除svg中的属性看是否可以修复问题

历经多番操作，终于发现是 g 标签中的 filter 属性在作祟


修复问题时的对比

修复前

 修复后

 

 删除之后会和设计稿稍有不同，需要仔细对比，看是否符合产品和设计需求

最后的疑问：明明这些属性在这些浏览器中早就已经支持，为什么还会出现这样的问题呢？有了解的老铁欢迎解答一下

阿里iconfont上传svg图片空白、或展示不全的解决方案/搜索到的icon无法改变颜色解决方案
yun_master的博客
06-05 1万+
原因 造成这个问题的原因，可能是因为sketch、dx等软件在导出svg时，自动在svg上添加了一些iconfont平台无法解析的属性造成的。所以解决这个问题，要么从svg代码入手，要么就需要借助工具来完成。 解决 改代码并不是很理想的解决方式，这里我们借助iconfont官方平台推荐的图形设计软件AI来解决这个问题。 1、首先下载一个AI软件 2、然后使用AI打开通过其他设计软件导出的svg图标 3、选中整个图标，然后选择对象—扩展—选择描边（已经选择取消，重新选择）——确定 4、保存为svg svg配置
svg图片在Safari上不显示
qq_35440907的博客
05-24 2532
问题： 1.在项目vue.config.js中配置了加载svg的加载 2.在components里面定义了svgIcon组件 问题：谷歌浏览器上使用svg图片显示正常，但是Safari一直显示不出来 解决办法： 如果是safari，用:xlink:href 来加载use 原因分析 谷歌浏览器显示出shadow-root，Safari没有显示，说明Safari浏览器没有自动解析shadow-root， xlink:href属性用于...
svg无法占满屏幕
Li-的博客
10-26 2216
问题描述： 使用svg作为背景时，发现容器可以占满，但svg无法铺满整个容器 解决方案：打开svg图片，然后在svg标签上面加上属性：preserveAspectRatio="none meet"; <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 250" preserveAspectRatio="none meet" > ...
【bug记录10】同一iOS webview页面中相同的两个svg图标出现部分显示或全部不显示的情况
最新发布
weixin_57208584的博客
11-26 1459
诸如<clipPath>此类的图形效果标签在用url进行引用时，都需要设置唯一id，否则会因为冲突而无法解析效果、从而无法正确渲染矢量图形。<filter>：滤镜效果<mask>：遮罩效果<linearGradient>和<radialGradient>：渐变和镭射效果<pattern>：使用预定义的图形对一个对象进行填充或描边（通过属性url引用pattern中预定义的图案）<marker>：定义在<path><line><polyline>或<polygon>
svg图在各种浏览器中显示
09-06
解决svg在各种浏览器从显示的问题，在IE等不支持SVG图的浏览器中，现在不需要下载adobe的插件也可以正常显示。
SVG图像在IE及其他浏览器中的兼容显示解决方案
随着网络技术的发展，现代浏览器（如Chrome、Firefox、Safari、Opera等）都对SVG提供了很好的支持。而旧版的Internet Explorer（IE9及之前版本）完全不支持SVG，需要依赖第三方插件来实现兼容。 2. **解决不支持SVG...
把网页变成黑白(兼容谷歌、火狐、ie等浏览器)
09-22
要实现网页内容的灰度转换，即把网页变成黑白效果，并确保兼容性覆盖谷歌浏览器、火狐浏览器、IE浏览器等主流浏览器，可以通过CSS的滤镜属性来实现。在CSS3中，提供了filter属性，其中的grayscale函数允许开发者通过...
【电脑运用及修理】Mozilla Firefox 浏览器
You_are_hanson的博客
08-08 818
firefox
浏览器显示TIF格式图像的方法
09-22
由于其复杂性，一般的网页浏览器如Chrome、Firefox、Safari和Edge等并未内置解析TIF的能力。为了在浏览器中查看TIF图像，我们需要采用一些特殊的方法，主要包括使用特定的插件或通过HTML对象标签插入。 1. **使用...
关于SVG文件在Firefox中正确显示的研究
热门推荐
逐日者
06-19 1万+
最近因为做SVG方面的开发工作，所以研究起SVG的一些东西。手头上使用的资料是SVG官方的文档，《SVG essentials》，《基于XML的SVG应用指南》。网上说，firefox,opera,都可以直接支持SVG，当然安装了SVG插件的IE也行。马上开始行动，代码之前，了无秘密。 写一个最简单的SVG文件：     使用安装了Adobe SVGViewerd的I
解决PPT插入svg图片显示不全的问题
weixin_42559117的博客
11-15 4837
office系列支持的向量图是emf格式，所以把svg图片转成emf再插入即可。
svg使用＜foreignObject＞标签插入html内容显示不完整
m0_37455857的博客
03-14 1367
bug：多个<foreignObject>标签包含多个body，两个并排的body各包含一个table 最后一个table里追加内容不完整。保证一个html文件里只有一个body试试，解决了，估计是xml格式浏览器解析的时候的问题！解决办法：把body改成div，可以保留一个。
Geoserver点图层设置SVG图标显示不全问题记录
07-14 2072
一、问题。Geoserver点图层设置SVG图标时，有些图标在地图上显示时会显示不全。 如下图所示： SVG图标如下： <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 ...
svg图像显示不全_SVG和混合模式可显示“涂鸦”图像
cungui5726的博客
08-23 2282
svg图像显示不全Using a combination of CSS animation, SVG dash-array and blend modes, we can recreate a “scratch to reveal” effect for images or other content in just five steps: 通过结合使用CSS动画 ，SVG dash-array和...
svg图片无法铺满的问题
weixin_44100002的博客
06-01 1147
svg文件打开在svg标签加上 preserveAspectRatio=“none meet”
IE浏览器不支持svg的innerHTML属性（google浏览器正常）无法显示箭头连接线和连线上的字
qingtianqingfeng的博客
09-14 1061
问题：Redmine 中插件redmine_issue_autoflow审批流程图，在IE浏览器无法正常显示箭头连接线及连接线上的文字yes，no，google浏览器正常显示。 解决方法：F12开发者工具，将google浏览器中Element的html代码与IE浏览器中html代码比较，发现IE中标签都没有，据此去后台找到对应js文件，发现是innerHTML未生效。原来是IE中svg不支持innerHTML，查找替代方法。 var arrows = element.find("svg > g")[
支持svg的浏览器_案例研究：跨Web浏览器引擎测试SVG支持
cune1359的博客
06-26 1585
所有主要的Web浏览器（包括Internet Explorer）都正式支持SVG（可缩放矢量图形）。 该支持涉及多种图像编辑器软件，尤其是Inkscape，它使用SVG作为其本机格式（如果要在SVG上进行更新，请单击此处） 。 但是网络浏览器到底支持什么？ 是否所有渲染引擎都以相同方式显示SVG文件及其功能？ 过滤器等高级功能又如何呢？ 好吧，这就是我们要找出的。 我们对现代浏览器进行了采...
svg图像保存为png图片（能解决可缩放svg图像转换为png后显示不全问题）
豆。的博客
08-28 3990
思路：（svg => canvas => png） 把svg作为dataurl放在image 创建一个canvas来显示image 利用canvas.toDataURL存为图片 创建a标签出发浏览器下载 以下代码为以可视区为范围保存为png图片 // 保存按钮 save(){ var serializer = new XMLSerializer(); var svg...
html svg无法显示,HTML/CSS svg 怎么显示不出来?
weixin_39827589的博客
06-16 2581
HTML/CSS svg 怎么显示不出来?html/CSS svg 怎么显示不出来? 在 HTML 中引入 svg 文件为何不显示? 下面给大家介绍一下原因和解决方案. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.当 HTML 引入 svg 文件却不显示, 可能由于 svg 不是所有浏览器都支持, Firefox, Chrome 支持, IE 有的低版本不支持.解决方案:使...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值