首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

#svg

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式

怎么防止svg在小米浏览器黑暗模式意外变成反色?

Echarts 实現自定义svg平面图报錯?

对象存储能上传SVG格式图片么?有没相关文档?

EatRice

腾云先锋 · 腾云先锋(TDP)成员 (已认证)

您好,是可以的,COS文档中没有对文件类型作出限制。上传文件的的相关准备如下所示:https://cloud.tencent.com/document/product/436/13321 前提条件 上传对象前,请您确保已创建存储桶。如未创建存储桶,请先参见 创建存储桶 文档进行操作。 操作步骤 登录 对象存储控制台。 在左侧导航栏中,单击【存储桶列表】,进入存储桶列表页面。 单击需要存储对象的存储桶,进入存储桶的文件列表页面。 在文件列表中,单击【上传文件】。 📷 1. 在弹出的窗口中,单击【选择文件】或【选择文件夹】,根据实际需求,选择单个或多个本地文件(或文件夹)。说明: 部分浏览器不支持多文件上传,建议使用 IE10以上、Firefox、Chrome 等主流浏览器。 📷 2.(可选)单击【参数配置】,在上传文件窗口中,设置对象属性。 📷... 展开详请

svg在Safari上不显示<marker>,是受<filter>影响?

EatRice

腾云先锋 · 腾云先锋(TDP)成员 (已认证)

...这是浏览器内核的兼容问题,您可以查询wenkit和safiri内核在对这一块处理的不同之处

小程序中使用cax渲染svg,只有rect可以绑定tap回调,path、text绑定后回调无效?

对您的文章:使用h5新标准MediaRecorder API在web页面进行音视频录制 的请教?

svg 中values 怎么结合 attributeName 设置具体的值?

如何实现数据可视化?

DEA林晨曦老司机
以下示例是做一份数据的可视化图表,一步步的来看下我们如何获取数据,以及如何进行可视化的展示。 📷 在上章内容中,提到了关于【数据可视化迭代过程】的步骤,这也能看出整个过程包含的步骤,大致有:1. 确定主题 - 2.数据获得 - 3.图表选择(表达)- 4图表绘制。 当然了我们也可以看到可视化是要一个不断迭代的过程,步骤之间都需要多次的迭代修改的。 确定主题 这肯定是第一步了,在做数据可视化的时候,首先你要明了你要做什么,想要从数据获中取什么信息,有了目标才能明确的往下做。 那我们这次还是来做关于空气质量PM2.5的数据展示,了解历年来PM2.5的实际情况和发展趋势。 数据获得 对于全国空气质量的数据,最权威的来源肯定是来自于中国环境监测总站(http://www.cnemc.cn/) 的数据提供。但是监测总站的API提供的并不是很详细,还有很多第三方也提供类似的API接口,比如PM25.in(http://pm25.in/) ,在API说明上做的很详细,他们的数据每日更新。所以这次我们选择PM25这个网站来获取数据源。 📷 我们可以看到PM25提供的内容是相当多,包括PM2.5、AQI、PM10、CO、NO2、O3等等。我们只需要PM2.5的数据,所以我们把其他不需要的数据都可以去除掉,同时把Json的数据转换为CSV的数据格式,这里转换数据只是为了下一步处理方便,我这边是选用Processing来做数据可视化处理的。如果你用D3.js,Echart来做的话,Json可能会更方便点。 📷 图表选择(表达) 对于很多人(非设计师)来说数据可能容易获取,但是像要把数据转换成合适的图表进行表达反而非常困难的。因为同样的数据,用不同的图表进行展示出来,得到的效果是完全不一样的。在平时我们可能用到最多的就是通过Excel来做的图表,在Excel2010的版本里面,提供了10类共53个图表,还提供了什么数据透视图,自定义图表等等,总之种类非常多。不过尽管图表种类繁多,但其基本类型只有以下几种: 曲线图:用来反映随时间变化的趋势; 柱形图:用来反映分类项目之间的比较,也可以用来反映时间趋势; 条形图:用来反映分类项目之间的比较; 散点图:用来反映相关性或分布关系; 饼图:用来反映构成,即部分占总体的比例; 地图:用来反映区域之间的分类比较; 那知道了基础图表的类型,如何去做图表的选择呢?国外专家Andrew Abela他将图表展示的关系分为4 类:比较、分布、构成、联系。然后根据这个分类和数据的状况给出了对应的图表类型建议。当我们不确定使用什么类型的图表的时候,可以参考下这个图。 📷 图表绘制 俗话说【不会撸码的交互不是好的数据可视化设计师】,虽然现在市面上有各式各样的可视化的方法和工具,但坦白来说【这些可视化工具都是大坑!!!】,要想做好可视化的表现,最好的方式还是需要掌握一门编程语言,只有这样你才能最合适的表达清楚出你想传达出来的数据信息。 这里给各位想跳入数据可视化这个大坑的设计师们(编程大佬请无视),推荐一下Processing这个创意编程语言。 Processing是美国麻省理工学院媒体实验室旗下美学与运算小组创造出来的(就是搞设计的人做出来的编程语言),非常容易上手,代码逻辑也很简单,几段代码就能做出十分出现效果的展示,下图就是Processing的界面。 📷 不过Processing没有代码提示的功能的,用起来还是十分痛苦的,经常是因为一个单词写错了,而造成程序报错。不过后来我发现到Subilme Text能支持Processing的编译环境,而且能提供代码提示功能,简直是发现新大陆一样,从此Processing用起来再也不费劲了。欢迎大家一起入坑Processing一起学习。 确定用Processing来实现后,我们继续来做PM2.5的可视化展示。国家环保部将空气质量分为六个等级,分别用绿、黄、橙、红、紫、褐六个颜色来标注,对于着优、良、轻度污染、中度污染、重度污染和严重污染六个空气质量。我们要展示历年来PM2.5的实际情况和发展趋势,就可以把每天的空气质量转换一个个不同颜色的小方格,通过颜色的区别来展示当天的PM2.5情况。 📷 先在纸上画一个简单的草图。已年为划分,下面用小方格展示该年内每天的空气质量是什么等级,把当天的PM2.5数值转换对应的颜色值。 📷 确定方式后,开始撸代码,代码很简单的,我大概编写了40来行就完成了,代码逻辑很简单就是先导入数据,然后判断当前数据的值是多少,根据不同的值赋予小方块不同的颜色。 📷 实现之后,看起来就是这样子的。日期时间轴是按照1月到12月排列的,通过上面的图示我们可以比较清楚的看到污染程度比较高的时间是集中在开头和结尾,就是1-2月,11-12月之间,也就是每年冬天就是PM2.5污染程度高的时间。 📷 我们继续把成都历史的数据可视化后来看下。我们发现12年之前成都空气质量都还不错的,在14年的时候,就没有小绿格了,可见14年成都空气质量有多差劲,15年、16年后慢慢的开始有点好转。我们在把北京,上海和深圳的天气拔来看看。 📷 第一列是成都08-16年的空气质量,第二列是北京的,第三列是上海的,第四列是深圳的。可见深圳的空气质量完爆成都、北京和上海。几乎全是小绿格,真是宜居好地方。而帝都北京空气质量是这四个城市中最差的。其中14年都是上述几个城市空气质量最差的一年,而也是这一年央视记者柴静从央视辞职出去开始拍摄雾霾的深度调查,在第二年2015年2月28号推出纪录片《穹顶之下》,引发了公众的一片哗然,全民开始关注雾霾,政府部门也开始着手治理雾霾,15年、16年开始有所好转。... 展开详请
以下示例是做一份数据的可视化图表,一步步的来看下我们如何获取数据,以及如何进行可视化的展示。 📷 在上章内容中,提到了关于【数据可视化迭代过程】的步骤,这也能看出整个过程包含的步骤,大致有:1. 确定主题 - 2.数据获得 - 3.图表选择(表达)- 4图表绘制。 当然了我们也可以看到可视化是要一个不断迭代的过程,步骤之间都需要多次的迭代修改的。 确定主题 这肯定是第一步了,在做数据可视化的时候,首先你要明了你要做什么,想要从数据获中取什么信息,有了目标才能明确的往下做。 那我们这次还是来做关于空气质量PM2.5的数据展示,了解历年来PM2.5的实际情况和发展趋势。 数据获得 对于全国空气质量的数据,最权威的来源肯定是来自于中国环境监测总站(http://www.cnemc.cn/) 的数据提供。但是监测总站的API提供的并不是很详细,还有很多第三方也提供类似的API接口,比如PM25.in(http://pm25.in/) ,在API说明上做的很详细,他们的数据每日更新。所以这次我们选择PM25这个网站来获取数据源。 📷 我们可以看到PM25提供的内容是相当多,包括PM2.5、AQI、PM10、CO、NO2、O3等等。我们只需要PM2.5的数据,所以我们把其他不需要的数据都可以去除掉,同时把Json的数据转换为CSV的数据格式,这里转换数据只是为了下一步处理方便,我这边是选用Processing来做数据可视化处理的。如果你用D3.js,Echart来做的话,Json可能会更方便点。 📷 图表选择(表达) 对于很多人(非设计师)来说数据可能容易获取,但是像要把数据转换成合适的图表进行表达反而非常困难的。因为同样的数据,用不同的图表进行展示出来,得到的效果是完全不一样的。在平时我们可能用到最多的就是通过Excel来做的图表,在Excel2010的版本里面,提供了10类共53个图表,还提供了什么数据透视图,自定义图表等等,总之种类非常多。不过尽管图表种类繁多,但其基本类型只有以下几种: 曲线图:用来反映随时间变化的趋势; 柱形图:用来反映分类项目之间的比较,也可以用来反映时间趋势; 条形图:用来反映分类项目之间的比较; 散点图:用来反映相关性或分布关系; 饼图:用来反映构成,即部分占总体的比例; 地图:用来反映区域之间的分类比较; 那知道了基础图表的类型,如何去做图表的选择呢?国外专家Andrew Abela他将图表展示的关系分为4 类:比较、分布、构成、联系。然后根据这个分类和数据的状况给出了对应的图表类型建议。当我们不确定使用什么类型的图表的时候,可以参考下这个图。 📷 图表绘制 俗话说【不会撸码的交互不是好的数据可视化设计师】,虽然现在市面上有各式各样的可视化的方法和工具,但坦白来说【这些可视化工具都是大坑!!!】,要想做好可视化的表现,最好的方式还是需要掌握一门编程语言,只有这样你才能最合适的表达清楚出你想传达出来的数据信息。 这里给各位想跳入数据可视化这个大坑的设计师们(编程大佬请无视),推荐一下Processing这个创意编程语言。 Processing是美国麻省理工学院媒体实验室旗下美学与运算小组创造出来的(就是搞设计的人做出来的编程语言),非常容易上手,代码逻辑也很简单,几段代码就能做出十分出现效果的展示,下图就是Processing的界面。 📷 不过Processing没有代码提示的功能的,用起来还是十分痛苦的,经常是因为一个单词写错了,而造成程序报错。不过后来我发现到Subilme Text能支持Processing的编译环境,而且能提供代码提示功能,简直是发现新大陆一样,从此Processing用起来再也不费劲了。欢迎大家一起入坑Processing一起学习。 确定用Processing来实现后,我们继续来做PM2.5的可视化展示。国家环保部将空气质量分为六个等级,分别用绿、黄、橙、红、紫、褐六个颜色来标注,对于着优、良、轻度污染、中度污染、重度污染和严重污染六个空气质量。我们要展示历年来PM2.5的实际情况和发展趋势,就可以把每天的空气质量转换一个个不同颜色的小方格,通过颜色的区别来展示当天的PM2.5情况。 📷 先在纸上画一个简单的草图。已年为划分,下面用小方格展示该年内每天的空气质量是什么等级,把当天的PM2.5数值转换对应的颜色值。 📷 确定方式后,开始撸代码,代码很简单的,我大概编写了40来行就完成了,代码逻辑很简单就是先导入数据,然后判断当前数据的值是多少,根据不同的值赋予小方块不同的颜色。 📷 实现之后,看起来就是这样子的。日期时间轴是按照1月到12月排列的,通过上面的图示我们可以比较清楚的看到污染程度比较高的时间是集中在开头和结尾,就是1-2月,11-12月之间,也就是每年冬天就是PM2.5污染程度高的时间。 📷 我们继续把成都历史的数据可视化后来看下。我们发现12年之前成都空气质量都还不错的,在14年的时候,就没有小绿格了,可见14年成都空气质量有多差劲,15年、16年后慢慢的开始有点好转。我们在把北京,上海和深圳的天气拔来看看。 📷 第一列是成都08-16年的空气质量,第二列是北京的,第三列是上海的,第四列是深圳的。可见深圳的空气质量完爆成都、北京和上海。几乎全是小绿格,真是宜居好地方。而帝都北京空气质量是这四个城市中最差的。其中14年都是上述几个城市空气质量最差的一年,而也是这一年央视记者柴静从央视辞职出去开始拍摄雾霾的深度调查,在第二年2015年2月28号推出纪录片《穹顶之下》,引发了公众的一片哗然,全民开始关注雾霾,政府部门也开始着手治理雾霾,15年、16年开始有所好转。

请问直播能否支持自定义数据包?

怎样在网页上较好地显示大型.svg图片? 有没有好的.svg查看器?

八月末my heart will go on

如何转换Raphael SVG到图像(PNG等)客户端?

我贼迷美丽策

我用Raphael创建了SVG。然后点击按钮,将保存SVG的div的内部HTML保存在一个变量中,然后在canvg中使用它,隐藏SVG div。然后我可以使用canvas2image的画布ID。它只对PNG非常有效。

HTML5帆布与SVG与div?

梦飞翔758WEB工程师 硬件玩家 CHH不负责版主
HTML5 Canvas只是一个位图的绘图表面。你设置绘画(用颜色和线条的粗细来说),绘制这个东西,然后画布不知道这个东西:它不知道它在哪里或者你刚画出来的是什么,它是只是像素。如果你想绘制矩形,让它们四处移动或者可以选择,那么你必须从头开始编写所有的代码,包括记住你画的代码。 另一方面,SVG必须保持对呈现的每个对象的引用。您创建的每个SVG / VML元素都是DOM中的一个真实元素。默认情况下,这可以让您更好地跟踪所创建的元素,并且默认情况下更容易处理像鼠标事件这样的事情,但是当存在大量对象时会显着减慢,那些SVG DOM引用意味着处理你绘制的东西的一些步骤是为你完成的。渲染真正的大对象时SVG速度更快,但渲染许多对象时速度更慢。 Canvas中的游戏可能会更快。一个巨大的地图程序在SVG中可能会更快。如果你想使用Canvas,我有一些关于获取可移动对象的教程。 画布对于更快速的事情和繁重的位图操作(比如动画)会更好,但是如果你想要很多的交互性,将需要更多的代码。 我已经在HTML DIV制作的绘图和Canvas制作的绘图上运行了一堆数字。我可以写一个关于每个好处的巨大的帖子,但我会给我的测试的一些相关的结果考虑你的具体应用: 我做了Canvas和HTML DIV测试页面,都有可移动的“节点”。画布节点是我创建的对象,并在Javascript中保持跟踪。 HTML节点是可移动的Div。 我为每个测试添加了100,000个节点。他们的表现完全不同: HTML测试选项卡永久加载(定时稍微在5分钟以内,第一次请求杀死页面)。 Chrome的任务管理器说该标签占用了168MB。当我看的时候,占用12-13%的CPU时间,当我不看的时候占用0%。 “画布”选项卡在一秒钟内加载,占用30MB。无论是否正在查看,它总是占用CPU时间的13%。 (2013年编辑:他们主要是固定的)因为当前的设置是在Canvas测试中每30毫秒重新绘制一次,所以在HTML页面上拖动更加平滑,这是设计期望的。 Canvas对此有很多优化。 (帆布失效是最简单的,也裁剪区域,有选择性的重绘,等等。只是取决于你有多少感觉实施)毫无疑问,你可以让 Canvas在对象操作上更快,就像在这个简单的测试中的div一样,当然,加载时间也会更快,Canvas中的绘图/加载速度更快,而且还有更多的优化空间(也就是说,排除非屏幕的东西非常容易)。 结论: SVG对于应用程序和应用程序而言可能更好(少于1000个?实际取决于) 画布对于成千上万的对象和小心的操作是更好的,但是需要更多的代码(或者库)才能实现。 HTML Div是笨重的,不能缩放,只有圆角可能会使圆形成为可能,但复杂的形状是可能的,但涉及数以百计的微小像素宽度的div。疯狂随之而来。... 展开详请
HTML5 Canvas只是一个位图的绘图表面。你设置绘画(用颜色和线条的粗细来说),绘制这个东西,然后画布不知道这个东西:它不知道它在哪里或者你刚画出来的是什么,它是只是像素。如果你想绘制矩形,让它们四处移动或者可以选择,那么你必须从头开始编写所有的代码,包括记住你画的代码。 另一方面,SVG必须保持对呈现的每个对象的引用。您创建的每个SVG / VML元素都是DOM中的一个真实元素。默认情况下,这可以让您更好地跟踪所创建的元素,并且默认情况下更容易处理像鼠标事件这样的事情,但是当存在大量对象时会显着减慢,那些SVG DOM引用意味着处理你绘制的东西的一些步骤是为你完成的。渲染真正的大对象时SVG速度更快,但渲染许多对象时速度更慢。 Canvas中的游戏可能会更快。一个巨大的地图程序在SVG中可能会更快。如果你想使用Canvas,我有一些关于获取可移动对象的教程。 画布对于更快速的事情和繁重的位图操作(比如动画)会更好,但是如果你想要很多的交互性,将需要更多的代码。 我已经在HTML DIV制作的绘图和Canvas制作的绘图上运行了一堆数字。我可以写一个关于每个好处的巨大的帖子,但我会给我的测试的一些相关的结果考虑你的具体应用: 我做了Canvas和HTML DIV测试页面,都有可移动的“节点”。画布节点是我创建的对象,并在Javascript中保持跟踪。 HTML节点是可移动的Div。 我为每个测试添加了100,000个节点。他们的表现完全不同: HTML测试选项卡永久加载(定时稍微在5分钟以内,第一次请求杀死页面)。 Chrome的任务管理器说该标签占用了168MB。当我看的时候,占用12-13%的CPU时间,当我不看的时候占用0%。 “画布”选项卡在一秒钟内加载,占用30MB。无论是否正在查看,它总是占用CPU时间的13%。 (2013年编辑:他们主要是固定的)因为当前的设置是在Canvas测试中每30毫秒重新绘制一次,所以在HTML页面上拖动更加平滑,这是设计期望的。 Canvas对此有很多优化。 (帆布失效是最简单的,也裁剪区域,有选择性的重绘,等等。只是取决于你有多少感觉实施)毫无疑问,你可以让 Canvas在对象操作上更快,就像在这个简单的测试中的div一样,当然,加载时间也会更快,Canvas中的绘图/加载速度更快,而且还有更多的优化空间(也就是说,排除非屏幕的东西非常容易)。 结论: SVG对于应用程序和应用程序而言可能更好(少于1000个?实际取决于) 画布对于成千上万的对象和小心的操作是更好的,但是需要更多的代码(或者库)才能实现。 HTML Div是笨重的,不能缩放,只有圆角可能会使圆形成为可能,但复杂的形状是可能的,但涉及数以百计的微小像素宽度的div。疯狂随之而来。

HTML / CSS中的如何转化图像的灰度?

你就可以使用一个SVG文件和一些CSS对Firefox中的图像进行去饱和处理。 你的SVG文件如下所示: <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> <filter id="desaturate"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> 把它保存为resources.svg,从现在起可以重新使用你想要改变为灰度的图像。 在你的CSS中,你可以使用Firefox特定的filter属性来引用过滤器: .target { filter: url(resources.svg#desaturate); } 如果你喜欢,也可以添加MS专有的,把这个类应用到你想要转换成灰度的图像(在Firefox> 3.5,IE8下工作)。 编辑: 这里有一个很好的博客文章,描述了filter在SalmanPK的答案中使用新的CSS3 属性,与这里描述的SVG方法一致。使用这种方法,你最终会得到类似于: img.desaturate{ filter: gray; /* IE */ -webkit-filter: grayscale(1); /* Old WebKit */ -webkit-filter: grayscale(100%); /* New WebKit */ filter: url(resources.svg#desaturate); /* older Firefox */ filter: grayscale(100%); /* Current draft standard */ } ... 展开详请

我想知道对象存储啥时候支持SVG?

领券