SVG基础使用记录

属性

width ->宽度
height ->高度
fill ->填充颜色
stroke ->边框颜色
stroke-width ->边框宽度
stroke-dasharray -> 边框挖空内容
stroke-linecap -> 边框圆角
viewport -> svg可见区域
viewbox -> svg画布上的坐标位置 用于自适应 例:viewBox=“0 0 20 20”

preserveAspectRatio ：
viewbox 是否强制进行统一缩放
值： xMidYMid meet（） 默认

标签

circle标签(画圆)

<circle r="5" cx="20" cy="20"></circle>

r 圆半径

line标签(画线)

<line x="6" y="10" stroke-width="8" stroke="currentColor"></line>

storke-width 线宽度 stroke 线颜色

g 标签(封装svg组件)

<g id="arrow">
  <polyline points="30 20, 70 50, 30 80" fill="transparent" stroke="currentColor" stroke-width="3"></polyline>
</g>

use 标签(使用svg组件)

<svg :style="{color:'red'}">
  <use href="#filledArrow"></use>
</svg>

symbol symbol 与 g 标签类似，但 symbol 可以拥有一个独立的 viewBox

<svg width="0" height="0">
  <symbol id="cross" viewBox="0 0 100 100">
    <line x1="50" y1="10" x2="50" y2="90" stroke-width="8" stroke="currentColor"></line>
    <line x1="10" y1="50" x2="90" y2="50" stroke-width="8" stroke="currentColor"></line>
  </symbol>
</svg>

渐变色

linearGradient(线型渐变色)

<linearGradient id="xxx">
	<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
	<stop offset="100%" stop-color="blue" stop-opacity="1"></stop>
</linearGradient>

stop-color 过渡颜色
stop-opacity 透明度

radialGradient(环形型渐变色)

<radialGradient id="xxx" r="50%" cx="50%" cy="50%" fx="50%" fy="50%">
	<stop offset="0%" stop-color="red" stop-opacity="1"></stop>
	<stop offset="100%" stop-color="blue" stop-opacity="1"></stop>
</radialGradient>

fx fy 起始投射点
cx cy 投射位置

动画

transform属性

<rect  transform="translate(50,50) rotate(30) skewX(30) scale(.5)"   />

translate 位移
rotate 旋转
skewX 和 skewY 斜切
scale 缩放

css补间动画

@keyframes 元素选择{
	from{ 开始状态
	  stroke-dasharray: 0 1;   设置实线和虚线的宽度
	}
	to{ 结束状态
	 stroke-dasharray: 1 0;
	}
}

SMIL动画（放在标签内）

set 标签

实现属性的延迟设置

<set attributeName="x" attributeType="XML" to="10" begin="1s" />

attributeName 需要改变的属性名
attribeteType 属性类型
to 移动位置
begin 延时时间

animate 标签

<animate attributeName="cx" from="0" to="200"  type=“none” dur="5s" repeatCount="indefinite"  fill="freeze"/>

attributeName 需要修改的属性名
from 开始位置.
to 结束位置
dur 过渡时间
repeatCount 重复次数 indefinite无限次
fill 结束后停留状态 freeze停留在最后位置 remove 最开始位置
type 属性值

animateTransform标签

<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="2" repeatCount="indefinite" />

旋转放大 可以接受三个参数( 0 0 0) 参数 x轴 y轴

animateMotion 标签

<animateMotion
		id="a"
      path="M 10 10 L 110 10 L 110 110 L 10 110 Z"
      dur="5s"
      rotate="auto"
      fill="freeze"
      repeatCount="indefinite"
      begin="0"
    />

path 运动轨迹 dur 动画时长 rotate 不知道( 值=0 动画更柔和吧)
fill 结束后停留状态 freeze停留在最后位置 remove 最开始位置
repeatCount 重复次数 indefinite无限次
begin 开始动画时间 可能值:(动画id.end=获取动画时长) ( 动画id.click 点击后开始动画)
id 动画id