svg基础

rect矩形

<svg width="400" height="400">
    <rect
            rx="20"
            ry="20"
            x="5"
            y="5"
            width="300"
            height="200"
            fill="green"
            stroke="pink"
            stroke-width="5"
    ></rect>
</svg>

rx为x轴圆角
ry为y轴圆角
x相当于top
y相当于left
fill为填充色
stroke为边框色
stroke-width为变宽长度

circle圆形

<svg width="200" height="200">
    <circle
            cx="100"
            cy="100"
            r="100"
            fill="pink"
    ></circle>
</svg>

重要属性：
cx定义圆心x轴坐标
cy定义圆心y轴坐标
r定义圆的半径

ellipse椭圆形

<svg width="200" height="100">
    <ellipse
            cx="100"
            cy="50"
            rx="100"
            ry="50"
            fill="blue"
    ></ellipse>
</svg>

重要属性：
cx定义椭圆x轴坐标
cy定义椭圆y轴坐标
rx定义椭圆的水平半径
ry定义椭圆的垂直半径

line线段

<svg width="100" height="100">
    <line
            x1="10"
            y1="10"
            x2="80"
            y2="80"
            stroke="black"
            stroke="2"
    ></line>
</svg>

重要属性：
x1定义x轴上起点坐标
y1定义y轴上起点坐标
x2定义x轴上结束坐标
y2定义y轴上结束坐标
fill属性不适用

polygon多边形

用于创建一个至少三个边的图形

<svg width="100" height="100">
    <polygon
            points="0,50 20,20 90,90"
            stroke="pink"
            stroke-width="2"
            fill="blue"
    ></polygon>
</svg>

重要属性：
points用于设置连接的每个坐标点（x1,y1 x2,y2 x3,y3 x4,y4）每个坐标点用空格隔开

polyline线条

用于创建一个至少包含三个边的图形，最终的图形不会闭合

<svg width="100" height="100">
    <polyline
            points="0,50 20,80 30,10 50,90 70,30"
            stroke-width="2"
            stroke="black"
            fill="none"
    ></polyline>
</svg>

重要属性：
fill需要设置为none，否则会自动添加填充色

text文本

<svg width="100" height="100">
    <text
            x="0"
            y="40"
            fill="red"
            transform="rotate(60 50,50)"
    >
        <tspan>span1</tspan>
        <tspan>span2</tspan>
    </text>
</svg>

倍塞尔曲线

<svg width="450" height="400">
    <g>
        <path
                d="M 100 350 l 150 -300"
                stroke="black"
                stroke-width="2"
        ></path>
        <path
                d="M 250 50 l 150 300"
                stroke="black"
                stroke-width="2"
        ></path>
        <path
                d="M 175 200 l 150 0"
                stroke="green"
                stroke-width="2"
        ></path>
        <path
                d="M 100 350 q 150 -300 300 0"
                stroke="blue"
                stroke-width="2"
                fill="none"
        ></path>
    </g>
    <g>
        <circle
                cx="100"
                cy="350"
                r="4"
                fill="black"
        ></circle>
        <circle
                cx="250"
                cy="50"
                r="4"
                fill="black"
        ></circle>
        <circle
                cx="400"
                cy="350"
                r="4"
                fill="black"
        ></circle>
    </g>
</svg>

属性

stroke 描边
stroke-width 描边厚度
stroke-linecap 键帽（butt，round，square）

stroke-dasharray 虚线序列

高斯模糊效果

<svg width="200" height="200">
    <defs>
        <filter x="" y="0" id="f1">
            <feGaussianBlur stdDeviation="10"></feGaussianBlur>
        </filter>
    </defs>
    <rect
            x="5"
            y="5"
            width="190"
            height="190"
            stroke="blue"
            stroke-width="5"
            fill="yellow"
            filter="url(#f1)"
    ></rect>
</svg>

模糊阴影效果

<svg width="140" height="140">
    <defs>
        <filter
                x="0"
                y="0"
                width="10"
                height="10"
                id="f2"
        >
            <feOffset
                    in="SourceGraphic"
                    dx="20"
                    dy="20"
            ></feOffset>
            <feGaussianBlur stdDeviation="10"></feGaussianBlur>
            <feBlend in="SourceGraphic"></feBlend>
        </filter>
    </defs>
    <rect
            width="90"
            height="90"
            stroke="blue"
            stroke-width="2"
            fill="yellow"
            filter="url(#f2)"
    ></rect>
</svg>

线性渐变

<svg width="200" height="200">
    <defs>
        <linearGradient
                x1="0%"
                y1="0%"
                x2="100%"
                y="0%"
                id="grad1"
        >
            <stop offset="0%" stop-color="red"></stop>
            <stop offset="100%" stop-color="yellow"></stop>
        </linearGradient>
    </defs>
    <rect
            width="180"
            height="180"
            fill="url(#grad1)"
    ></rect>
</svg>

径向渐变

<svg width="200" height="200">
    <defs>
        <radialGradient
                cx="50%"
                cy="50%"
                r="50%"
                fx="50%"
                fy="50%"
                id="grad2"
        >
            <stop offset="0%" stop-color="rgb(255,255,255)"></stop>
            <stop offset="100%" stop-color="rgb(0,0,255)"></stop>
        </radialGradient>
    </defs>
    <circle
            cx="100"
            cy="100"
            r="90"
            fill="url(#grad2)"
    ></circle>
</svg>