svg入门

1.svg文件引入

  • 可通过引入使用
  • 理论上同样可以使用 img 元素,但是在低于4.0版本的Firefox 中不起作用
  • 2.svg坐标系统

    • 用户单位和屏幕单位的映射关系被称为用户坐标系统
    • 默认1用户像素 === 设备上的1像素(但是设备上可能会自己定义1像素到底是多大)

    3.svg形状

    • react
    • circle,ellipse
    • line,polyline
    • polygon
    • path

    4.svg形状之path

    
    

    属性d的值是一个“命令+参数”的序列,每一个命令都有两种表示方式:

    • 用大写字母,表示采用绝对定位 M10 10
    • 用小写字母,表示采用相对定位,例如:从上一个点开始,向上移动10px,向左移动7px m 10 10
      例如画一个矩形:
    大写:
    
    
    小写:
    
    

    因为属性d采用的是用户坐标系统,所以不需标明单位。

    命令 表达方式(默认第一种写法) 描述
    M M10 10 移动画笔位置,但是不画线,从一个点到另一个
    L L10 10/平行线 H10垂直线 V10 绘制线条
    Z Z不区分大小写 Z命令会从当前点画一条直线到路径的起点
    贝塞尔曲线-在path元素里,只存在两种贝塞尔曲线:三次贝塞尔曲线C,和二次贝塞尔曲线Q
    C C 20 20, 40 20, 50 10 最后一个坐标(x,y)表示的是曲线的终点,另外两个坐标是控制点,(x1,y1)是起点的控制点,(x2,y2)是终点的控制点
    S S x2 y2, x y S命令可以用来创建与之前那些曲线一样的贝塞尔曲线,但是,如果S命令跟在一个C命令或者另一个S命令的后面,它的第一个控制点,就会被假设成前一个控制点的对称点。如果S命令单独使用,那么它的两个控制点就会被假设为同一个点。
    Q Q x1 y1 只有一个控制点,用来确定起点和终点的曲线斜率
    T T x y T命令前面是一个Q命令,或者是另一个T命令,T会通过前一个控制点推断与之定义的终点之间的控制点
    弧形,基本上,弧形可以视为圆形或椭圆形的一部分
    A

    5.填充和边框

    • stroke
    • stroke-opacity
    • stroke-linecap: 'butt','square','round' 描边方式
    • stroke-width
    • stroke-linejoin: 'miter','round','bevel' 2条线段之间的描边方式
    • stroke-dasharray 是一组用逗号分割的数字组成的数列
    • stroke-dashoffset,定义虚线开始的位置
    • fill
    • fill-opacity
    • fill-rule,用于定义如何给图形重叠的区域上色

    利用style设置svg css

    表示定义,这里面可以定义一些不会在SVG图形中出现、但是可以被其他元素使用的元素。

    
      
        
      
      
    
    

    6.渐变

    
      
          
            
            
            
          
          
            
            
            
          
          
      
     
      
      
      
    
    

    线性渐变linearGradient,渐变的方向可以通过两个点来控制,它们分别是属性x1、x2、y1和y2,这些属性定义了渐变路线走向
    径向渐变radialGradient

    你可能感兴趣的:(svg入门)