知识森林

Appearance

On this page

svg 基础知识 ​

如果我们需要做一些复杂的动画，或者绘制指定的流程图，并且具有一定的交互，那么建议使用svg。

常用标签 ​

  • rect: 矩形
  • polygon: 多边形
  • circle: 圆形
  • ellipse: 椭圆形
  • line: 线条
  • polyline: 多段线
  • text：文本
html
<svg
    width="500px"
    height="300px"
    viewBox="0 0 100 100"
    style="background-color: #f2f2f2;"
>
    <!-- 矩形 -->
    <rect x="10" y="20" width="20" height="20"></rect>

    <!-- 
    多边形 
        points： 组成多边形的点 中间用空格隔开
    -->
    <polygon points="0,0 20,0 20,10 5,10 0,0"></polygon>

    <!-- 
    圆形
        cx: x轴圆心位置
        cy: y轴圆心位置 
        r: 半径
    -->
    <circle cx="20" cy="60" r="10"></circle>

    <!-- 
    椭圆形
        cx: x轴圆心位置
        cy: y轴圆心位置 
        rx: x轴半径
        ry: y轴半径
    -->
    <ellipse cx="80" cy="60" rx="20" ry="10"></ellipse>

    <line x1="40" y1="0" x2="40" y2="10" stroke="black" stroke-width="0.1"></line>

    <!-- 多段线 -->
    <polyline points="45,0 50,0 50,15 40,15 45,0" fill="transparent" stroke="black" stroke-width="0.1"></polyline>

    <text x="10" y="80" style="font-size: 4;">HELLO, DT!</text>
</svg>

svg常见css与属性 ​

js
======== 静态属性 ===============
// 填充颜色 
fill: string | 'transparent'

// 边框颜色
stroke: string | 'transparent'

// 边框宽度
stroke-width: number

// 边框透明度 0-1
stroke-opacity: number

// 边框虚线数组, 例如： '1 2 1'
stroke-dasharray: string

// 虚线偏移量
stroke-dashoffset: number


======== 变换属性 ===============

// 变换, 例如：transform="translate(-10, 0)"
transform: string

// 变换中心, 例如： transform-origin="center", 注意需要设置style="transform-box: fill-box"
transform-origin: string

svg动画 ​