详细教程:
梗概:
<svg>标签作为各种形状标签的容器<svg>下的各种子标签, 作用是绘制一部分矢量形状, 决定了矢量图的结构- 通过修改
<svg>下的形状标签的通用样式, 进而更改矢量图形的样式
常见实例说明:
这是一个从网上矢量图标库下载的.svg格式的矢量图文件
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" stroke=red
color=blue d="m21.003 0h.04c.814 0 1.55.337 2.075.88l.001.001c.543.526.88 1.261.88 2.076v.047-.002 18.002.04c0 .814-.337 1.55-.88 2.075l-.001.001c-.526.543-1.261.88-2.076.88-.014 0-.028 0-.043 0h.002-18.002c-.013 0-.029 0-.044 0-.814 0-1.55-.337-2.075-.88l-.001-.001c-.543-.526-.88-1.261-.88-2.076 0-.014 0-.028 0-.043v.002-18.002c0-.012 0-.026 0-.04 0-.814.337-1.55.88-2.075l.001-.001c.526-.543 1.261-.88 2.076-.88h.043-.002zm-10.555 18.162v-13.612c0-.004 0-.009 0-.013 0-.395-.164-.751-.428-1.004-.253-.261-.607-.423-.998-.423-.007 0-.014 0-.02 0h-4.446c-.004 0-.009 0-.013 0-.395 0-.751.164-1.004.428-.264.254-.429.61-.429 1.004v.007 13.612c-.001.015-.001.032-.001.05 0 .392.165.745.429.994l.001.001c.258.248.609.4.996.4h.023-.001 4.447.021c.387 0 .738-.153.997-.401.265-.25.43-.603.43-.995 0-.018 0-.035-.001-.052v.003zm10.448-6v-7.611c0-.004 0-.009 0-.013 0-.395-.164-.751-.428-1.004-.254-.265-.61-.429-1.004-.429-.005 0-.009 0-.014 0h-4.446c-.004 0-.009 0-.013 0-.395 0-.751.164-1.004.428-.265.254-.429.61-.429 1.004v.014-.001 7.608c-.001.015-.001.032-.001.05 0 .392.165.745.429.994l.001.001c.258.248.609.4.996.4h.023-.001 4.447.021c.387 0 .738-.153.997-.401.265-.25.43-.603.43-.995 0-.016 0-.032-.001-.048v.002z"/></svg>1. 说明:
<svg>是一个SVG容器- viewBox属性顾名思义
xmlns属性为矢量图的命名空间, 这个固定为"http://www.w3.org/2000/svg", 不用理会
- 子标签
<path>是绘制矢量图的形状结构的标签, path表示用路径点描述形状- 因为path可拓展性强, 所以导出的svg通常会用path标签表示
- 类似的svg形状标签还有很多, 如
<circle>,<text>等…
- 子标签
<path>的属性d是path标签独有的, 用来表示形状 - svg形状标签共有的属性:
fill="currentColor"一般都是这样固定出现, 用来搭配color与stroke使用stroke属性表示形状轮廓的颜色color属性表示形状的整体颜色
- 动画标签:
<animate>：用于在指定的时间内改变元素的某个属性值。<animateTransform>：用于在指定的时间内改变元素的变换。<set>：在指定时间点设置元素的属性值。
这些动画标签可以结合使用，创建复杂的动画效果，使得 SVG 图形更加生动和有趣。.
实际应用
- child::使用js定义svg