常见属性 Attributes
常见元素 Elements
参考画布样式
.svg-basic {
  width: 300px;
  height: 300px;
  margin: 1rem auto;
  background-color: #ff0;
}      
圆点 cx、cy; 默认左上角(0, 0)
半径 r
<svg class="svg-basic">
    <circle cx=150 cy=150 r="150" fill="#f40"></circle>
</svg>
位置:cx、cy;
圆角:x、y方向上的圆角 rx、ry
<svg class="svg-basic">
    <ellipse cx=150 cy=150 rx="100" ry="80" fill="#f40"></ellipse>
</svg>
位置:x、y
宽高:width、height
圆角:x、y方向上的圆角 rx、ry
<svg class="svg-basic">
    <rect x=40 y=40 width=220 height=220 rx=0 ry=0 fill=#f40></rect>
</svg>
起点:(x1,y1)
终点:(x2,y2)
配合stroke-dasharray和stroke-dashoffset绘制更丰富的线条
stroke、stroke-width可以使用CSS指定
必须指定stroke,否则线条不可见
<svg class="svg-basic">
    <line class="svg-line" x1=0 y1=0 x2=300 y2=300></line>
</svg>
.svg-line {
    stroke: #f40;
    stroke-width: 2px;
}
[] 点划线:改变数字,查看点划线起点的偏移情况
.svg-line-dash {
    stroke: #f40;
    stroke-width: 4px;
    stroke-dasharray: 10 20;
    stroke-dashoffset: 0;
}
stroke-dashoffset:
[] 加载器/进度条:stroke-dasharray的占空比从开始到较大的值
#loader-circle {
  fill: transparent;
  stroke: #f40;
  stroke-width: 2px;
  stroke-dasharray: 0 1000;
  animation: alternate loader 5s linear forwards;
}

@keyframes loader {
  to {
      stroke-dasharray: 1000;
  }
}      
hover
利用点的集合points和笔触颜色stroke和宽度stroke-width或填充fill绘制
填充fill默认黑色;如不需要,可以设置为none
<svg class="svg-basic">
    <polygon class="svg-polygon" points="0,0 50,50 50,100"></polygon>
</svg>
.svg-polygon {
    stroke: #f40;
    stroke-width: 2px;
    fill: none;
}
SVG 允许您像图形一样修改文本并应用渐变、图案、剪切路径、蒙版或过滤器
默认情况下,text使用以下默认属性:颜色:黑色;字体大小:16px;不换行
x y:基线的起点 - the starting point of the text baseline;设置文本的起点
dx dy:用于指定每个字符或子字符串<tspan>相对于其父元素的额外偏移量,用来微调文本的位置,特别是在处理多行文本或特定字符的对齐时非常有用
结合水平对齐属性 text-anchor和垂直对齐属性 dominant-baseline,更加精准控制文本
SVG尺寸:300*60
遇见最好的自己
<text>遇见最好的自己</text>
遇见最好的自己
<text x="16" y="16">遇见最好的自己</text>
遇见最好的自己
<text x="16" y="16" text-anchor="end">遇见最好的自己</text>
遇见最好的自己
<text x="16" y="16" text-anchor="middle">遇见最好的自己</text>
遇见最好的自己
<text x="150" y="30" dominant-baseline="middle">遇见最好的自己</text>
遇见最好的自己
<text x="150" y="30" dominant-baseline="central">遇见最好的自己</text>
遇见最好的自己
<text x="150" y="30" 
    text-anchor="middle" 
    dominant-baseline="central">遇见最好的自己</text>
遇见最好的自己
<text x="150" y="30" 
    text-anchor="middle" 
    dominant-baseline="middle">遇见最好的自己</text>
遇见 最好的 自己
<text x="150" y="30" 
    text-anchor="middle" 
    dominant-baseline="middle">遇见最好的自己</text>
子文本 <tspan>
<text>的子文本 subtext,便于精准控制
默认00开始;偏移了16
<text dx="16">默认00开始;偏移了16</text>
多偏移了16
<text x="16" y="16" dx="16">多偏移了16</text>
hi, glpla;无偏移
<text x="16" y="16">
  <tspan>hi,</tspan>
  <tspan>glpla;无偏移</tspan>
</text>
hi, glpla;相对父元素偏移
<text x="16" y="16">
  <tspan>hi,</tspan>
  <tspan dx="16" dy="16">glpla;相对父元素偏移</tspan>
</text>
hi, glpla 小字体 大字体
<svg class="svg-basic txt">
  <text x="150" y="30" dominant-baseline="middle" text-anchor="middle">
    <tspan>hi,</tspan>
    <tspan font-size="18">glpla</tspan>
    <tspan font-size="20">小字体</tspan>
    <tspan font-size="24">大字体</tspan>
  </text>
</svg>
hi, glpla 小字体 大字体
<svg class="svg-basic txt">
  <text x="150" y="30" dominant-baseline="central" text-anchor="middle">
    <tspan>hi,</tspan>
    <tspan font-size="18">glpla</tspan>
    <tspan font-size="20">小字体</tspan>
    <tspan font-size="24">大字体</tspan>
  </text>
</svg>
. SVG 基本形状中最强大的一个。通用绘图工具 - generic element to define a shape;可以创建线条、曲线、弧形等基本图形 - the basic shapes
. path 元素的形状是通过属性 d 定义的,属性 d 的值是一个“命令 + 参数”的序列
综合实例 Demo
图标 icon
总结与作业 Summary & Homework
总结
. SVG 的各种使用
作业
. 分别完成以上案例
. 利用 SVG 优化个人网站