使用 svg(Scalable Vector Graphics)绘制前端图表的注意事项以及小技巧

1. 图形的边框(即stroke): 一半在图形内部,一半在图形外部,当 stroke-width 很宽时,在设置 图形坐标时需要注意这点。

2. IRI (Internationalized Resource Identifier, 比 uri 更通用的一种资源标记方法) 和 FuncIRI 的区别:

svg 里面会看到两种 标记资源的方法: some_iri , url(some_iri)

FuncIRI 就是把 一个 iri 用 url( ) 括起来,其作用就是明确告知使用者 括号里面的内容是一个 iri 。之所以有这种需求,是因为 某些属性既可以接受一个iri 又可以接受一个 一般的字符串, 所以需要有一种特定的格式来区分这两种情况。 (比如 fill 属性 可以 直接填写颜色,也可以引用一个 梯度 元素)

所以, 对于那些只能接受 iri的属性 (例如 ‘xlink:href’), 就不应该使用 FuncIRI 。

另外两点区别:

1. 使用 IRI的时候,只能包含 id, 而使用 FuncIRI 时, url()中的内容可能需要加上 location.href 以构成完整的 url (取决于页面的base设置)

2. 使用 IRI 时, id 中不能有 连字符(-) , 使用 FuncIRI 时 , id中可以有 连字符。

3. svg插入html内容,可以使用 foreignObject 元素。

实际上是通过foreignObject 插入 xhtml的内容,因为 foreignObject 是用于插入其他的 xml内容的, xhtml是在 html4基础上改造的兼容xml格式的html标准。

4. svg中的角度,顺时针为正。

例如,transform属性中 rotate(90) , 表示顺时针旋转90度。

在绘制椭圆型的弧线时,设置 sweep-flag 时也要根据角度的变化来设置。

5. fill="none"会导致该区域无法捕捉鼠标事件(比如点击)

对一个封闭区域设置 fill属性时,fill="none" 和 fill="white" (假定背景色就是白色) 虽然从视觉上没有任何区别,但是对交互是有影响的。fill="none" 表示这个区域不属于该元素,所以导致这个区域的鼠标动作并非作用在该元素上。

时间: 2024-10-16 22:28:04

使用 svg(Scalable Vector Graphics)绘制前端图表的注意事项以及小技巧的相关文章

前端开发者应该知道的 CSS 小技巧

一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… CSS 1 2 3 4 5 /* 添加边框 */ .nav li { border-right: 1p

前端开发中的一些js小技巧

1.获取某个月的天数 1 function getDate (year, month) { 2 return new Date(year, month + 1, 0).getDate(); 3 }

UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制

本篇作为技术分享系列的第一篇,详细讲一下 SVG 的解析和绘制,这部分功能的研究和最终实现由团队的 @黄超超 同学负责,感谢提供技术文档和支持. 首先我们来看一下 SVG 的文件结构和组成 SVG (Scalable Vector Graphics) 是一种可缩放矢量图形,使用 XML 格式来定义,是一种 W3C 标准,图像在放大或改变尺寸的情况下其图形质量不会有所损失. 下面是一个简单的 SVG 的文件结构例子: <?xml version="1.0" standalone=&

C#GDI+自定义绘制曲线图表控件DataChart 简单实现

C#GDI+自定义绘制曲线图表控件DataChart 这里只说明在计算刻度和曲线绘制的时候 只提供思路,只是做了下简单的计算,不喜勿喷 还望见谅,高手直接飘过吧.这个要做好,还是需要研究研究算法的,比如刻度随着控件的大小发生改变的时候计算不同的值,根据刻度范围来计算刻度以及刻度值等,这里没有研究,制作简单的绘制,让其知道自定义曲线控件的画法,对于新手来讲应该是有一些帮助的.有时间我把研究过后的算法加上做一个通用可靠一点的控件分享. 例子如下图所示 首先百度一张图片,就按照它的样子来绘制 该图片链

使用Graphics绘制字体阴影代码

using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D; using System.Linq; using System.Windows.Forms; namespace Guying.Project.DrawFontShadow { public partial class FrmMain : Form { public FrmMain() { In

HTML5 SVG简单的动态绘制轮廓线条动画插件

walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件.它支持SVG的path,line 和 polyline元素.walkway使用起来简单方便,可以制作出非常酷的SVG线条动态绘制效果.更好的动态绘制线条插件可以参考:html5 svg线条动态绘制文字轮廓边框动画.HTML5 SVG图形轮廓线条绘制动画插件-vivus 和 html5 svg线条动态绘制iphone边框动画效果. 在线演示:http://www.htmleaf.com/Demo/201501261282.h

Python使用plotly绘制数据图表的方法

转载:http://www.jb51.net/article/118936.htm 本篇文章主要介绍了Python使用plotly绘制数据图表的方法,实例分析了plotly绘制的技巧. 导语:使用 python-plotly 模块来进行压测数据的绘制,并且生成静态 html 页面结果展示. 不少小伙伴在开发过程中都有对模块进行压测的经历,压测结束后大家往往喜欢使用Excel处理压测数据并绘制数据可视化视图,但这样不能很方便的使用web页面进行数据展示.本文将介绍使用python-plotly模块

移动前端工作的那些事---前端制作之微信小技巧篇

移动前端工作的那些事---前端制作之微信小技巧篇_WebApp赵海洋_新浪博客 移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20:47) 转载▼移动前端工作的那些事---前端制作之微信小技巧篇,布布扣,bubuko.com

前端制作之微信小技巧__避免a标签跳转到手机自带浏览器

随着微信的越来越大众化,微信的使用程度也越来越高.随之,产生了一种新的推广模式,即微信推广.在这个微信的大平台上会衍生出许许多多的推广手段.而移动前端作为服务于手机用户的手机网页技术,也不可避免的加入进来. 一些客户不仅仅满足于自己的网站可以在手机浏览器上完美的展现出来,同时还要求可以在微信中进行广泛推广.这就要求移动前端的制作者在制作移动端网站的过程中,还要考虑是否兼容微信的推广. 就制作技术而言,如果可以完美的在手机浏览器中显示,那么在微信推广里也可以完美显示.因为微信中调用的网页引擎就是你