这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
公共属性
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(缩放比例，缩放比例) 只传一个默认两个相同
矩形的属性
x: 矩形左上角点的横坐标
y: 矩形左上角点的纵坐标
rx: 圆角
ry: 圆角
width: 宽
height: 高
圆的属性
cx: 圆中心点的横坐标
cy: 圆中心点的纵坐标
r: 半径
椭圆的属性
cx: 椭圆中心点的横坐标
cy: 椭圆中心点的纵坐标
rx: x轴半径
ry: y轴半径
line直线的属性
x1: 起点的横坐标
y1: 起点的纵坐标
x2: 终点的横坐标
y2: 终点的纵坐标
折线的属性
points: 点坐标的集合，例："0 0, 1 1"表示（0,0）(1,1)两个点
多边形的属性
points: 点坐标的集合最后一个点自动连到起点，例："0 0, 1 1"表示（0,0）(1,1)两个点
剪裁标签
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)"/>
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
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)" />
