![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
SVG
陈迹·清欢
这个作者很懒,什么都没留下…
展开
-
SVG命名空间
https://www.jianshu.com/p/c590983dbc87转载 2020-02-28 18:16:52 · 899 阅读 · 0 评论 -
初识SVG(六)
5.1.SVG <text>代码样例:<svg xmlns="http://www.w3.org/2000/svg"> <!--这里defs定义了全局的网格--> <defs> <pattern id="grad" x="0" y="0" width="20" height="20" patternUnits="...原创 2020-02-28 16:47:34 · 166 阅读 · 0 评论 -
SVG----transform
from:https://segmentfault.com/a/1190000009248258转载 2020-02-28 14:25:54 · 132 阅读 · 0 评论 -
SVG分组和引用对象
1.<g>元素<g>元素会将所有子元素作为一个组合,通常还有一个唯一的id作为名称;每个组合还可以拥有自己的<title>和<desc>来供基于文本的xml应用程序识别或者为视障用户提供更好的可访问性;阅读器会读取<title>和<desc>元素的内容。鼠标悬停或者轻触组合内的图形时,会显示<title>元...转载 2020-02-28 10:18:04 · 300 阅读 · 0 评论 -
初识SVG(五)
4.1.Path<path> 元素用于定义一个路径。下面的命令可用于路径数据:M = movetoM x y:移动画笔,后面如果有重复参数,会被当做是L命令处理L = linetoL x y:绘制直线到指定位置H = horizontal linetoH x:绘制水平线到指定位置V = vertical linetoV y:绘制竖直线到指定位置...原创 2020-02-27 20:04:21 · 144 阅读 · 0 评论 -
初识SVG(四)
3.1.线性渐变<linearGradient>和<stop>定义方向关键点位置和颜色gradientUnits原创 2020-02-27 15:15:04 · 185 阅读 · 0 评论 -
初始SVG(三)
2.2.分组的概念为什么要使用分组呢?好比你要对一个物体进行上色,而这个物体由多个组件组成,都是一个颜色,这个时候你就会发现一个一个去上色太麻烦了,所以也就有了分组的存在。<g>标签创建分组属性继承(分组上设置的属性子元素可以继承)transform定义f分组坐标变换{使用element.setAttribute(name,value)设置即可}可以嵌套2.3.坐标系...原创 2020-02-26 20:49:37 · 220 阅读 · 0 评论 -
初识SVG(二)
2.1.SVG世界、视野、视窗的概念viewBox的参数分别代表起点x,y,宽高width,height。并且皆是针对世界坐标系而言。世界是客观无穷的,所以本质上不可能在浏览器上展示,所以定义一个视窗用来展示,而视野(viewBox)则是我们所看到的世界的样子(这个对于学过图形学的应该很好理解)。视窗和视野的单位尺度不同,也就是说,无论我们定义多大的视野,视窗的大小该是多少就是多少,不会随之...原创 2020-02-26 17:51:33 · 154 阅读 · 0 评论 -
初识SVG(一)
1.1.SVG简介使用XML描述的矢量文件W3C标准(1.1)(http://www.w3.org/TR/SVG11)浏览器支持情况(http://caniuse.com/#cats=SVG)IE9Chrome 33.0+Firefox 28.0+Safari 7.0+1.2.使用方式在浏览器直接打开(把对应svg代码保存为后缀为svg的文件,浏览器可直接识别)在HTML...原创 2020-02-25 23:26:01 · 139 阅读 · 0 评论