SVG 有一些预定义的形状元素,可被开发者使用和操作:
w3c SVG 教程
菜鸟 SVG 实例 | 菜鸟教程
MDN SVG 教程 - SVG:可缩放矢量图形 | MDN
g元素可以把若干个基本形状编成一个组。
SVG 文件全局有效的规则是“后来居上”,越后面的元素越可见。
常用形状:
- 矩形
- 圆形
- 椭圆
- 线
- 折线
- 多边形
- 路径
- 文字
矩形 rect 例子:
代码解释:
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
- rx 属性定义水平半径; ry默认跟rx一样的值 可单独设置
- x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
- y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
- CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
- CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)
圆形 circle 例子:
代码解释:
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。
椭圆 ellipse 例子:
代码解释:
- cx 属性定义圆点的 x 坐标
- cy 属性定义圆点的 y 坐标
- rx 属性定义水平半径
- ry 属性定义垂直半径
线条 line 例子:
代码解释:
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
多边形 polygon 例子:
代码解释:
points 属性定义多边形每个角的 x 和 y 坐标
折线 polyline 例子:
代码解释:
points 属性定义折线每个角的 x 和 y 坐标
路径 path 例子:
代码解释:
d - SVG:可缩放矢量图形 | MDN
下面的命令可用于路径数据:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
移动到:M、m
画线至:L、l、H、h、V、v
三次方贝塞尔曲线:C、c、S、s
二次方贝塞尔曲线:Q、q、T、t
椭圆曲线:A、a
封闭路径:Z、z
注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
椭圆曲线:
文本 text 例子:
代码解释:
x="列表的X -轴的位置。在文本中在第n个字符的位置在第n个x轴。如果后面存在额外的字符,耗尽他们最后一个字符之后放置的位置。 0是默认"
y="列表的Y轴位置。(参考x)0是默认"
text-anchor用于决定文本流方向 start | middle | end | inherit
transform 属性: rotate(30 20,40) 第一个参数30是角度; 20,40是旋转中心
下列每个属性可以被设置为一个 SVG 属性或者成为一个 CSS 声明:
font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。
tspan元素:
用来标记大块文本的子部分,它必须是一个text元素或别的tspan元素的子元素。
dx="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。(参考x)"
dy="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。(参考x)"
rotate="一个旋转的列表。第n个旋转是第n个字符。附加字符没有给出最后的旋转值"
textLength="SVG查看器将尝试显示文本之间的间距/或字形调整的文本目标长度。(默认:正常文本的长度)"
lengthAdjust="告诉查看器,如果指定长度就尝试进行调整用以呈现文本。这两个值是'spacing'和'spacingAndGlyphs'
tref元素:
允许引用已经定义的文本,高效地把它复制到当前位置。你可以使用xlink:href属性,把它指向一个元素,取得其文本内容。你可以独立于源样式化它、修改它的外观。
textPath元素:
利用它的xlink:href属性取得一个任意路径,把字符对齐到路径,于是字体会环绕路径、顺着路径走。
填充和边框
fill 填充属性
fil-opacity 透明度 0~1
stroke 边框属性
stroke-opacity 透明度 0~1
stroke-width 宽度
stroke-linecap 边框重点的形状 butt 90度垂直 | square 直角封闭 | round 圆角封闭
stroke-linejoin 描边线段连接 miter 默认连接处形成尖角 | round 圆角连接 | bevel 形成斜接
stroke-dasharray 虚线描边 (数字必须用逗号分割 空格会被忽略)
渐变
线性渐变 linearGradient 和径向渐变 radialGradient 必须给渐变内容指定一个id
为了让渐变能被重复使用,渐变内容需要定义在标签内部,而不是定义在形状上面
线性渐变的stop节点通过指定位置的offset属性和stop-color属性来说明在渐变特定位置上是什么颜色,偏移量应该始终从0%(0)开始到100%(1) 结束。
linearGradient 渐变方向可以通过两个点来控制 x1,x2,y1,y2 默认是水平方向
径向渐变是从一个点开始发散绘制渐变
radialGradient 的也是通过两个stop节点来定义其边缘位置,第一个点定义了渐变结束所围绕的圆环,由一个中心点 cx, cy属性及半径r来定义。 第二个点被称为焦点,由fx,fy属性定义,描述了渐变的中心(默认与中心点一致)。
spreadMethod属性控制渐变到达终点的行为 pad 默认 | reflect 渐变持续但反转颜色 | repeat 重复渐变
图案
patterns 也需要放在SVG文档的内部
pattern元素内部可以包含其它的基本形状。关于 pattern 容易混淆的事是,pattern 定义了一个单元系统以及他们的大小。上例中,我们在 pattern 元素上定义了width和height属性,用于描述在重复下一个图案之前应该跨过多远。
动画
动画元素放在形状元素的内部.
用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里,属性从开始值变成结束值, attributeName用来指定变化的属性
元素定义了一个元素如何沿着运动路径进行移动
元素变动了目标元素上的一个变形属性,从而允许动画控制转换、缩放、旋转或斜切
剪切和遮罩
在 (100,100) 创建一个圆形,半径是 100。
属性clip-path引用了一个带单个 rect 元素的元素。
它内部的这个矩形将把画布的上半部分涂黑。注意,clipPath元素经常放在一个defs元素内。
滤镜
transform
跟css3中的语法基本一致
transform - SVG:可缩放矢量图形 | MDN
全部demo.svg
五年web前端经验
H5静态页面 需要交互 联调接口的项目 bug解决