echarts里symbol不显示svg图 & 判断是否为ie浏览器

最新推荐文章于 2024-07-09 07:36:37 发布
最新推荐文章于 2024-07-09 07:36:37 发布
阅读量2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010969088/article/details/104339483
版权

ie能直接显示svg图，但放在echarts里的svg不显示

找到一些类似问题，但没找到具体原因

https://github.com/apache/incubator-echarts/issues/10884

因此选择直接判断浏览器类型，若是ie就返回png图片

之前，js判断的方式都是利用浏览器的useragent字段。通过判断useragent字段里面是否包含有MSIE字段来判断是否是IE系列浏览器。但是在IE11之后，微软把自家的IE革命了，IE11里面的useagent没有MSIE字样。

IE 11的userAgent为："Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Shuame; rv:11.0) like Gecko"。明显之前根据MSIE的方式来判断，对IE11是失效的。

 if(!!window.ActiveXObject || "ActiveXObject" in window)


1.IE10及以下，window.ActiveXObject 返回一个对象，!window.ActiveXObject则变为false，!!window.ActiveXObject则为true

2.IE11中，window.ActiveXObject返回undefine，!window.ActiveXObject则变成了true，!!window.ActiveXObject则变成了false，进入 "window.ActiveXObject" in window判断，该判断条件在IE11下返回true。

3.其他非IE浏览器，如chrome，firefox，window.ActiveXObject都是undefine，而 "window.ActiveXObject" in window也是返回false

原文链接：https://blog.csdn.net/whupanyinghua/article/details/38026027

 

拾-亦
关注
echarts的symbol使用本地图片
奔跑起来才能感受到强风吹拂
09-23 7032
let symbolImg = 'image://'+ require('@/assets/bigscreen-img/map-logo.png') //或者import引入在拼接也行 有几点想说的： symbol使用回调函数会报错，这个坑目前还没改。 使用本地图片，拼接完成在放到symbol上，要不然放到symbol上在拼接，不好使。 也可以使用base64的方式引入，但是我试过10k的图片手动转成base64变成了18k,体积变大了，就没必要了 ...
Echarts图标无法显示问题解决
qq_34422681的博客
09-23 2858
本人前端菜鸟，想要使用Echarts进行饼状图绘制，但是按照教程上的方法进行操作之后一直无法显示出饼状图（前端页面上一片空白，没有任何显示）。
Echarts：渲染成Canvas还是SVG，该如何抉择？
贝格前端工场的博客
07-09 1807
ECharts 从初始一直使用 Canvas 绘制图表。而 ECharts v4.0 发布了 SVG 渲染器，从而提供了一种新的选择。在初始化图表实例时，只需设置 renderer 参数 为 'canvas' 或 'svg' 即可指定渲染器，比较方便。贝格前端工场带领大家看下如何选择。
echarts浮点图使用svg图片
全栈小菜鸡
05-18 3583
echarts 中导入svg一开始没有啥思路，只能去看文档，发现有 symbol 可以导入图片，这些svg图片我是放到一个静态服务器上面，然后写入他们的链接，请求数据的时候后端可以直接返回名字，然后拼接一下链接就可以啦 <template> div id="imgicon" :style="{width: '100%', height: `${info_canvas}`}" /> </template> export default { data(){ retu
echarts 中使用自定义图标无法显示
RealizeInnerSelf丶
06-12 2034
文章目录echarts 中使用自定义图标无法显示背景与问题所在解决过程 echarts 中使用自定义图标无法显示 背景与问题所在 近期需要做类似下图的效果，在网上找到的 echarts demo 能够显示自定义图标，一样的代码拷贝过来可以正常预览，但把图标换成自己的就无法在图上显示… 一样的写法，配出来是个方块…？？？ 人家的图片咋就可以呢！就？很神奇！ 排查了很久没发现问题，直到第二天又仔细对比了几遍之后才发现问题所在： 少了个前缀（image://），而网上找的案例博客里也没强调要注意这个地方…（它
echarts在本地svg背景图上描点
qq_33404590的博客
02-22 728
echarts中使用本地图片---描点
echarts地图上的图片用svg格式的使用
weixin_47116639的博客
01-07 5723
第一步：跟ui要svg格式的图片 第二步：将这个图片用浏览器，右键打开空白页打开源代码 第三步：将path//=""放到seris的symbol=====》symbol:"path://M23.6 后面的大一串数字都是要复制过来，这样echarts的地图上面的船图片就可以用啦 最后看下效果哦 随便写写，希望有用，感恩有你 ...
echarts详细说明
pyy的博客
09-17 3309
https://www.iteye.com/blog/elang0705-2252577 简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，...
ECharts-Javascript的图表库推荐
Wave的专栏
05-02 2万+
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_54854317的博客
03-03 791
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
【中国大学生计算机设计大赛数据可视化赛道】国奖项目深入剖析—推动乡村振兴可视化分析平台
一键难忘的博客
11-21 1865
【中国大学生计算机设计大赛数据可视化赛道】国奖项目深入剖析—推动乡村振兴三农问题可视化分析平台 本案例涉及技术：html+css+javascript+echarts+jqurey。 数据：三农数据.xlsx 难度：⭐⭐⭐（3/5） 心得：量变产生质变
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
echarts依据svg作为地图并实现打点
qq_43086723的博客
04-10 936
echarts依据svg作为地图并实现打点
echart树状图使用细则以及注意事项以及SVG实现树形组织结构图绘制（可实现页面要求设计的树状结构图）
qq_72760247的博客
08-29 3623
echart树状图使用细则以及注意事项以及SVG实现树形组织结构图绘制（可实现页面要求设计的树状结构图）
echarts中引用svg
weixin_44042792的博客
12-28 3447
<template> <div class="hello"> <div class="EchartPractice"> <div id="main"></div> </div> </div> </template> <script> export default { name: "EchartPractice", data() { ...
【echarts】解决动态条形图Bar Race国旗emoji在PC端不显示的问题
qq_57319696的博客
02-02 585
解决国旗emoji因为在PC端无法正常显示，呈现国家缩写的样式。
echarts 支持svg格式
weixin_30426879的博客
04-27 2203
今天研究了下echarts的svg格式。发现用ai生成svg格式的图片，echarts上面显示不了。 经过了多次的百度和谷歌终于找到了用Method Draw画出来的svg格式，echarts就能加载出来。 现附上用echarts加载的svg的方法 链接地址： 足球例子 在echart下面的util包下的mapData的params.js找到mapParams object下面加上 v...
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
caixuanji的博客
07-29 1万+
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
ie浏览器下给svg格式的图片设置了高度和宽度后，图片显示不全怎么办
最新发布
09-13
在IE浏览器下，SVG（Scalable Vector Graphics）图片虽然支持设置高度和宽度，但是由于一些历史原因，可能会存在兼容性问题导致图片显示不全。以下是一些解决方法： 1. 使用`viewBox`属性：确保SVG元素有正确的视口(`viewBox`)值，它定义了SVG图形的坐标空间。将宽度和高度设置在这个属性上而不是直接在HTML标签上，比如： ```html <svg width="100%" height="100%" viewBox="0 0 500 500"> <image xlink:href="your-image.svg" preserveAspectRatio="xMidYMid meet" /> </svg> ``` `preserveAspectRatio`属性有助于保持图像的比例。 2. 利用CSS：尝试通过CSS调整SVG的display、width和height属性，同时设置max-width和max-height避免缩放失真： ```css svg { max-width: 100%; max-height: 100%; display: block; } ``` 3. 兼容模式：IE浏览器可能需要特定的DOCTYPE声明以启用更好的SVG支持。你可以试试加上这个： ```html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ``` 4. 使用polyfill库：对于非常老的版本的IE，可能需要借助如SVG.js这样的polyfill库来增强SVG的支持。 如果以上方法都试过了还是无法解决问题，可能是某个特定的SVG元素或者样式冲突。检查SVG文件内容，以及与之相关的JavaScript脚本，看是否有潜在的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值