2022-7-16日课程总结

认识，svg

用户可以直接用 代码 来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到 HTML 中通过浏览器来观看。 SVG是一种用 XML 定义的语言，用来描述二维矢量及矢量/栅格图形。 SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape例如：由直线和曲线组成的路径）、图象 (image)、文本 (text)。

 

一，利用svg绘图

1.1rect矩形

<svg width="100%" height="800">
    <rect x="100" y="100" width="200" height="100" fill="blue"stroke="red" stroke-width="3" rx="20" ry="50" />

</svg>主要属性：

x,y：开始位置；
width,height：矩形宽高；
fill：填充颜色、默认为黑色；
stroke：描边的颜色；
stoke-width：描边的宽度；
rx，ry：圆角；

1.2circle圆形

<circle cx="200" cy="200" r="50" fill="blue" stroke="red" stroke-width="5" fill-opacity=".7" stroke-opacity=".7" />

主要属性：

cx，cy：交叉点为圆心；
r：半径；
fill-opacity：填充透明度；
stroke-opacity：边框透明度

1.3椭圆形
大部分属性与圆形相同，椭圆有rx和ry两个半径

<ellipse cx="200" cy="200" rx="50" ry="30" fill="blue" />折线
<polyline points="100 100 100 200 200 200" stroke="red" fill="none" />

主要属性：
points:两个值为一个坐标组（如 x y x y x y）

1.4直线

<line x1="100" y1="100" x2="200" y2="100" stroke="red" stroke-width="2" />

主要属性：
x1,y1：开始坐标
x2,y2：结束坐标

二，svg动画

SVG动画使用方式

1.创建动画，告诉动画标记哪个元素需要执行动画

2.创建元素，在元素中说明需要执行什么动画、

SVG动画属性]

●atributeType: CSS/XML规定的属性值的名称空间

●atrbuteName: 规定元素的哪个属性会产生动画效果

●from/to: 从哪到哪

. dur;动画时长

●fl:动画结束之后的状态，保持free2e结束状态/remove回复初始状态半径从50%到100%变化的圆。

2.1线性渐变<linearGradient>

<linearGradient>元素用于定义线性渐变。

<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平，垂直或角渐变：

• 当y1和y2相等，而x1和x2不同时，可创建水平渐变
• 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
• 当x1和x2不同，且y1和y2不同时，可创建角形渐变

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      </linearGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  </svg>

  2.2径向渐变<radialGradient>

  <radialGradient>元素用于定义放射性渐变。

  <radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义 

• <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,255);
        stop-opacity:0" />
        <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  </svg>

  2.3放大

• 放大就是从原点放大到固定位置的一个过程，途中也可以加入渐变使效果更加丰富

• <svg width="8000" height="8000" >
          <circle cx="500" cy="300" r="0">
  
              <animate attributeName="r" repeatCount="indefinite" attributeType="XML" from="500" to="500"  dur="1" fill="freeze"> </animate>
              <animate attributeName="fill" repeatCount="indefinite"  attributeType="XML" from="blue" to="red" dur="3" fill="freeze"> </animate>
  
          </circle>
        
          </svg>>

  2.4旋转

• 旋转只是围绕设定的原点进行一次旋转，如果想要设定旋转的次数利用repeatCount设置一次或多次，也可以设置indefinite进

    <svg width="1000" height="800">
        <rect width="500" height="500" fill="red">
          <animateTransform
            attributeName="transform"
            type="rotate"
            repeatCount="indefinite"
            from="0 500 500 "
            to="360 300 300"
            dur="0.0001"
          ></animateTransform>
        </rect>
      </svg>

  行永久旋转。