SVG之Animation

2017-05-11
阅读 12 分钟
23.9k
<animate>元素用于实现动画效果(动画截图比较麻烦,本文中的例子最好直接写demo看效果) 基本动画 将<animate>元素嵌入到元素内,来实现该元素的动画效果。 {代码...} 以上代码会一个200*20的长方形,在5秒内渐变成一个20*20的正方形,并且在动画结束时停留在正方形的状态。 <animate>元素的基本属性...

SVG之Clipping and Masking

2017-05-05
阅读 5 分钟
3.6k
<clipPath>元素用来定义裁剪路径(我更愿意叫裁剪范围,因为<clipPath>内部可以是任何封闭的形状)。需要被裁剪的svg元素,通过style="clip-path:url(#clipPathId)"来指定根据clipPath范围裁剪,超出clipPath封闭形状外的部分将被隐藏。

SVG之text

2017-05-04
阅读 6 分钟
34.2k
svg里输入文本用<text>元素 <text>基本属性 x,y stroke,fill font styles (x,y)用于指定文字起始位置。准确的说,x指定文字最左侧坐标位置,y指定文字baseline所处y轴位置。fill的默认为black,stroke默认为none。如果设置了stroke,字的边缘会再“描一层边”。如果设置了stroke并将fill设为none,呈现为空心...

SVG之Patterns & Gradient

2017-05-03
阅读 12 分钟
6.2k
svg有两种填充方式:pattern和gradient。pattern可以实现以指定的图案来填充一块区域。gradient可以实现用渐变色来填充一块区域,渐变可以是线性(linearGradient)的,也可以是放射性(radialGradient)的。这块区域可以是fill,也可以是stroke。

SVG之Paths

2017-05-01
阅读 5 分钟
6.2k
看d3.js的时候就见识过<path>元素有多牛X,啥都能画出来,可不知其原理的话,看上去简直形同天书!没关系,有的是时间精力和耐性,仔细看看这天书的正确打开方式。

SVG之transform

2017-04-30
阅读 7 分钟
26.2k
svg的形变和css的形变用的都是transform,而且属性也几乎没差(是几乎)。 translate transform="translate(x-value, y-value)" 简单来说,就是偏移。沿x轴方向偏移x-value个单位长度,沿y轴方向偏移y-value个单位长度。 {代码...} 复杂来说,svg处理偏移的时候,其实是对元素所在的坐标系做整体偏移。那上面例子来说,#re...

SVG之文档结构

2017-04-28
阅读 4 分钟
3.7k
svg的样式之间的关系像极了html和css之间的关系,但还是有细微的差别。前一篇说到的svg的样式主要就是strock和fill的相关属性。这些属性可以用四种不同方式被作用到svg元素上,比css作用到html元素多一种。比如stroke="red"要作用到<line x1="0" y1="50" x2="100" y1="50">上

SVG之Basic Shape

2017-04-28
阅读 3 分钟
1.9k
最后一个参数stroke-miterlimit是和stroke-linejoin="miter"配合使用的。举例来说,两条线夹角比较小的时候,用stroke-linejoin="miter"方式连接,并且stroke-miterlimit设置成一个比较大的是指时会出现很长的延伸

SVG之ViewBox

2017-04-28
阅读 3 分钟
63.1k
最近开始看SVG Essentials。找不到中文版的,逼着自己看原版书,进度比较慢,不过边学技术边学英语还是挺有成就感的^_^。目前看到Chapter 4,有必要先停下来整理下viewport这个知识点,个人感觉挺关键的。