SVG学习基本操作总结

标签及属性

公共属性

stroke: 边框颜色
fill: 填充色
fill-opacity: 填充透明度
stroke-width: 边框宽度
stroke-dasharray: 虚线边框 例："4,3" 第一个值是点划线的长度，第二个值是点划线之间的间距
stroke-opacity: 描边透明度
stroke-linecap: 线两端的样式 butt 直角 square 直角 round 圆角
stroke-linejoin: 两条线交界处样式 miter 直角 round 圆角 bevel 斜接
transform: 变形
  translate: 平移
  rotate: 旋转（围绕svg左上角点）
  skewX: 斜切，逆时针压缩 例：skewX(角度数)
  skewY: 斜切，顺时针压缩
  scale: 缩放 例：scale(缩放比例，缩放比例) 只传一个默认两个相同

rect 矩形 属性

x: 矩形左上角点的横坐标
y: 矩形左上角点的纵坐标
rx: 圆角
ry: 圆角
width: 宽
height: 高

circle 圆 属性

cx: 圆中心点的横坐标
cy: 圆中心点的纵坐标
r: 半径

ellipse 椭圆 属性

cx: 椭圆中心点的横坐标
cy: 椭圆中心点的纵坐标
rx: x轴半径
ry: y轴半径

line 直线 属性

x1: 起点的横坐标
y1: 起点的纵坐标
x2: 终点的横坐标
y2: 终点的纵坐标

polyline 折线 属性

points: 点坐标的集合，例："0 0, 1 1"表示（0,0）(1,1)两个点

polygon 多边形 属性

points: 点坐标的集合最后一个点自动连到起点，例："0 0, 1 1"表示（0,0）(1,1)两个点

clipPath 裁剪 标签

clipPath 图形内的部分显示

g 标签

应用场景：g 标签唯一的作用是把属性赋给一组标签

// demo
<g stroke="red" stroke-width="2" fill="none">
  <rect x="10" y="10" width="100" height="100"/>
  <circle cx="60" cy="60" r="20"/>
</g>

defs 标签

应用场景：没有直接显示的元素放到defs标签中,例如：蒙版、渐变等

// demo
<defs>
  <radialGradient id="myradialgradient">
    <stop offset="0%" stop-color="#00dbde" />
    <stop offset="100%" stop-color="#f902ff" />
  </radialGradient>
</defs>
<rect x="10" y="10" width="100" height="100" rx="5" fill="url(#myradialgradient)"/>

linearGradient 线性渐变 属性

应用场景：渐变属性需要绑定到fill属性上使用：fill="url(#mylinearGradient)"

x1: 起始点横坐标
y1: 起始点纵坐标
x2: 结束点横坐标
y2: 结束点纵坐标
spreadMethod: pad，reflect，repeat
gradientUnits: userSpaceOnUse，objectBoundingBox

radialGradient 径向渐变 属性

cx: 渐变中心点x坐标占容器x坐标的比例，取值范围：0~1 
cy: 渐变中心点y坐标占容器y坐标的比例，取值范围：0~1
r: 渐变半径占容器x坐标和y坐标的比例，取值范围：0~1
fx：渐变焦点x坐标占容器x坐标的比例，取值范围：0~1
fy: 渐变焦点y坐标占容器y坐标的比例，取值范围：0~1
spreadMethod: pad reflect repeat,
gradientUnits: userSpaceOnUse  objectBoundingBox

path 路径 属性

d: 
 // 大写:绝对路径；小写：相对路径。
- M：移动画笔到某个点
- L：直线
- H：平行线
- V：垂直线
- Z: 闭合
- A：弧线
  - 参数：
  - 1. x轴半径
  - 2. y轴半径
  - 3. 旋转角度
  - 4. 大角度还是小角度 0 小角度 1 大角度
  - 5. 顺时针还是逆时针 0 逆时针 1 顺时针
  - 6. 终点x坐标
  - 7. 终点y坐标
- C：三次贝塞尔曲线
- S：三次贝塞尔曲线的对称
- Q：二次贝塞尔曲线
- T：二次贝塞尔曲线的对称

// demo: path画圆弧
<svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M 100 100 A 50 50 0 0 1 150 50" stroke="#e41313" stroke-width="2" fill="none" />
  <path d="M 150 50 A 50 50 0 0 1 200 100" stroke="#9fda32" stroke-width="2" fill="none" />
  <path d="M 200 100 A 50 50 0 0 1 150 150" stroke="#d31bba" stroke-width="2" fill="none" />
</svg>

mask 蒙版

• 蒙版需要绑定到style属性上使用：style="mask:url(#mymask)"
• mask内的颜色越接近黑色透明度越高，越接近白色透明度越低，黑色全透，白色不透明。

<foreignObject x="100" y="100" width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
    porta vel dui convallis, rutrum imperdiet eros. Aliquam
    erat volutpat.
  </div>
</foreignObject>
<defs>
  <mask id="mymask">
    <rect x="100" y="100" width="100" height="100" fill="rgba(255,255,255,0.6)"/>
    <circle cx="150" cy="150" r="30" fill="black"/>
  </mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="red" style="mask:url(#mymask)" />

应用场景：用来做镂空遮罩效果。

foreignObject 属性

应用场景：用来嵌套html