SVG tutorial

https://codepen.io/HunorMarton/full/PoGbgqj

[email protected]

[email protected]

[email protected]

[email protected]

Christmas bauble

viewBox: 坐标轴

background-color: fill

border: stroke, stroke-width

Tree

polygon: points 点的集合

Gingerbread figure

颜色、描边和字体属性可以移到 CSS 中

stroke-linecap: 它可以使线段末端呈圆形 (border-radius)

House

rx: 圆角半径, radius x 水平方向, 单设置 rx 就可形成圆角矩形

ry

• 必须与 rx 一起使用才能生效
• 当 rx 和 ry 值不同时,可以创建不对称的圆角

Christmas bauble with clip-path

circle: cx cy 圆心的 x y

defs: 定义以后需要重复使用的图形元素

polyline: points 定义点 x y 一对

Day 6: How to Draw Basic Paths with SVG

path

d: move to, line to

stroke-linecap: 指定路径两端线帽的样式

1. butt: 线段结束处以直边结束,标准正方形 (默认值)。
2. round: 线段结束处以圆形结束。
3. square: 线段结束处以正方形结束,等同于线段宽度的矩形。 stroke-linejoin: 两个线段连接处边角的样式
4. miter: 用延长的尖角连接,形成尖头 (默认值)。
5. round: 用圆角连接。
6. bevel: 用斜面截断连接。

Day 7: How to Draw a Star with SVG

g: 组合对象的容器 group

transform: 平移, 缩放, 旋转等

Day 8: How to Draw a Snowflake with SVG

defs, use: 定义和复用图形对象