H5学习SVG

一、SVG

1.线和矩形

1. 线

.line1{
    stroke: black;
    stroke-width: 3px;
}
<svg width='500px' height='300px' style='border: 1px solid #000'>
    <line x1='100' y1='100' x2='200' y2='100' class="line1"></line>
</svg>

stroke-dasharray: 15px;虚线（可设置多值，对应线和空白，后面依次循环）

stroke-dashoffset图形偏移量（位置不变，图形在位置上偏移），可利用设置成动画

2. 矩形

<svg width='500px' height='300px' style='border: 1px solid #000'>
    
    <rect height='50' width='100' x='150' y='150' rx='10' ry='10'></rect>
    //rx，ry表示圆角
</svg>

2.圆、椭圆、折线

1. 圆

circle{
    fill: transparent;//默认填充黑色，
    stroke: red;//描线颜色
}
<circle r='50' cx='50' cy='50'></circle>

2. 椭圆
   CX属性定义的椭圆中心的x坐标
   CY属性定义的椭圆中心的y坐标
   RX属性定义的水平半径
   RY属性定义的垂直半径

<ellipse rx='100' ry='30' cx='100' cy='50'></ellipse>

3. 折线

circle{
    fill: transparent;//默认填充
    stroke: red;//描线颜色
}
<polyline points='0 0,50 50,50 100,100 100,100 50'></polyline>

3.多边形和文本

1. 多边形
   与polyline不同的是它会封闭

polygon{
    fill: transparent;
    stroke: red;
}
<polygon points='0 0,50 50,50 100,100 100,100 50'></polygon>

2. 文本

text{
    stroke: blue;
    stroke-width: 1px;
}
<text x='300' y='50'>这是一段文本</text>

4.透明度与线条样式

1. 线段样式（与canvas一样）

polyline{
    fill: transparent;
    stroke: red;
    stroke-linejoin: round;
    stroke-width: 10px;
}

stroke-linejoin: bevel;

2. 透明度

polygon{
    fill: green;
    stroke: red;
    stroke-opacity: 0.5;//边框透明
    fill-opacity: 0.5;//内容透明
    stroke-linejoin: bevel;
    stroke-width: 10px;
}
<polygon points='0 0,50 50,50 100,100 100,100 50'></polygon>

5.路径Path

M(moveTo)
L(lineTo)
H(水平位置)
V(垂直位置）
z闭合
大写字母表示绝对位置，小写字母表示相对位置，z除外
无论是否闭合，都会默认填充

path{
    stroke: black;
    fill: transparent;
}
<path d='M 50 50 L 100 50 l 50 50 z'></path>

<path d='M 50 50 H 100 V 100 z'></path>

6.画弧

圆心和两点确定可以画出两个圆（可能重合），所以里面的大弧小弧就是红色标记的部分。

A 弧长半径 弧短半径 旋转角度 大弧1/小弧0 顺1/逆时针0 终点位置

<path d='M 50 50 A 50 50 0 1 1 50 150'></path>

<path d='M 100 50 A 100 50 -45 0 1 50 150'></path>

<path d='M 100 50 A 100 50 -45 1 1 50 150'></path>

7.线性渐变

<defs>
    <linearGradient id="bg1" x1='0' y1='0' x2='100%' y2='100%'>//设置渐变方向
        <stop offset='0%' style='stop-color: rgb(255,255,0)'></stop>
        <stop offset='100%' style='stop-color: rgb(255,0,0)'></stop>
    </linearGradient>
</defs>
<rect x='100' y='100' height='100' width='100' style='fill: url(#bg1)'></rect>//引用

8.高斯模糊

stdDeviation模糊值

    <defs>
        <linearGradient id="bg1" x1='0' y1='0' x2='100%' y2='100%'>
            <stop offset='0%' style='stop-color: rgb(255,255,0)'></stop>
            <stop offset='100%' style='stop-color: rgb(255,0,0)'></stop>
        </linearGradient>
        <filter id='Guassian'>
            <feGaussianBlur in='SourceGraphic' stdDeviation='10'></feGaussianBlur>
        </filter>
    </defs>
    <rect x='100' y='100' height='100' width='100' style='fill: url(#bg1);filter:url(#Guassian);'></rect>

有很多种模糊类型，工作时美工会设计好。

9.viewBox

设置新的内容区显示原来内容区的内容

<svg width='500px' height='300px' style='border: 1px solid #000'>
    <rect height='50' width='100' x='50' y='50' rx='10' ry='10'></rect>
</svg>
<svg width='500px' height='300px' viewBox='0,0,250,150' style='border: 1px solid #000'>
    <rect height='50' width='100' x='50' y='50' rx='10' ry='10'></rect>
</svg>//用250*150来显示500*300的内容，放大了