SVG学习

2019-12-04 本文已影响0人 WhiteStruggle

svg

MDN较为详细

地址：https://developer.mozilla.org/zh-CN/docs/Web/SVG

svg: scalable vector graphics 可缩放矢量图

该图片使用代码书写而成
缩放不会失帧
内容轻量

如何使用

svg 可以嵌入浏览器，也可以单独成为一个文件

xml语言，svg使用该语言定义

书写svg

基本格式举例：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background:#999" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="50" y="50" fill="red" stroke="black" stroke-width="5"  />
    <circle cx="250" cy="100" r="50" fill="red" stroke="black" stroke-width="5" />
    <ellipse rx="50" ry="100" cx="400" cy="150" fill="red" stroke="black" stroke-width="5"/>
    <line x1="47.5" x2="400" y1="50" y2="50" stroke="black" stroke-width="10"/>
    <polyline points="50 150 250 150 400 250" fill="none" stroke="black" stroke-width="10" />
    <polygon points="100 500 200 250 300 500 50 350 350 350  " fill="red" stroke="black" stroke-width="10" />
</svg>

fill，填充颜色，取值transparent（透明）
stroke，边框
stroke-width，边框宽度

矩形

<rect width="100" height="100" x="50" y="50" fill="red" stroke="black" stroke-width="5"  />

宽，高，x坐标，y坐标，填充色，边框，边框宽度

圆形

<circle cx="250" cy="100" r="50" fill="red" stroke="black" stroke-width="5" />

cx圆心X坐标

cy圆心y坐标

椭圆

<ellipse rx="50" ry="100" cx="400" cy="150" fill="red" stroke="black" stroke-width="5"/>

rx横向椭圆半径

ry纵向椭圆半径

线条

<line x1="47.5" x2="400" y1="50" y2="50" stroke="black" stroke-width="10"/>

由两个坐标连接

折线

<polyline points="50 150 250 150 400 250" fill="none" stroke="black" stroke-width="10" />

由坐标依次连接

多边形

画五角星

<polygon points="100 500 200 250 300 500 50 350 350 350  " fill="red" stroke="black" stroke-width="10" />

由坐标依次连接

路径

M = moveto（起始坐标）
L = lineto（画线）
H = horizontal lineto（横线）
V = vertical lineto（垂直线）
C = curveto（曲线）
S = smooth curveto（平滑曲线）
Q = quadratic Belzier curve（二次Belzier曲线）
T = smooth quadratic Belzier curveto（光滑的二次贝尔齐尔曲线）
A = elliptical Arc（椭圆弧）
Z = closepath（闭合）

A（椭圆）的使用：

rx ry
顺时针旋转角度
小弧（0）或大弧（1）
顺时针（1）或逆时针（0）
太极图

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background:#999" xmlns="http://www.w3.org/2000/svg">
    <path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A 200 200 0 0 1 250 50" fill="black"  />
    <circle cx="250" cy="150" r="30" fill="white" />
    <path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A 200 200 0 0 0 250 50" fill="white"  />
    <circle cx="250" cy="350" r="30" fill="black" />
</svg>

stroke属性

1、stroke

边框色，属性定义一条线，文本或元素轮廓颜色

2、stroke-width

文本或元素轮廓厚度

3、stroke-linecap

Stroke-linecap属性定义线段端点的风格，
属性值：

butt
square
round

stroke-linecap="square"

4、stroke-dasharray

用于创建虚线

举例：stroke-dasharray="20,10,5,5,5,10"

5、stroke-opacity

属性设置边框的透明度，值的范围从0到1，

举例：stroke-opacity="1"

6、stroke-linejoin

属性设置线条拐弯处的连接方式，属性值：

miter
round
bevel

举例：stroke-linejoin="bevel"

线性渐变——linearGradient

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

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

<linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称

fill:url(#red_green) fill="url(#red_green)"属性把需要渐变的图形元素链接到此渐变

<linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置

渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

<!--五角星渐变染色-->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500" style="background:#999" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <polygon points="150 350 250 100 350 350 100 200 400 200  " style="fill:url(#red_green)" />
    <defs>
        <linearGradient id="red_green" x1="0%" y1="100%" x2="0%" y2="30%">
            <stop offset="0%" stop-color="red" stop-opacity="1"/>
            <stop offset="100%" stop-color="green" stop-opacity="1"/>
        </linearGradient>
    </defs>
</svg>

<!-- 正方形渐变 -->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background:#999" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="150" y="150" width="200" height="200" style="fill:url(#blue_red)" />
    <defs>
        <linearGradient id="blue_red" x1="0%" y1="10%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="blue" stop-opacity="1">
            </stop>
            <stop offset="100%" stop-color="red" stop-opacity="1">
            </stop>
        </linearGradient>
    </defs>
</svg>

放射性渐变——radialGradient

<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义

cx、cy 和 r 属性定义外圈，fx 和 fy 定义内圈渐变的颜色范围可由两种或多种颜色组成

r是外圈的半径，（cx，cy）为外圆圆心坐标
（fx，fy）为内圆圆心坐标

每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

举例：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background:#999" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="red_green" cx="100%" cy="10%" r="70%" fx="50%" fy="50%" >
            <stop offset="0%" stop-color="red" stop-opacity="1" ></stop>
            <stop offset="100%" stop-color="green" stop-opacity="1" ></stop>
        </radialGradient>
    </defs>
    <rect width="200" height="200" x="150" y="150" style="fill:url(#red_green)" />
</svg>

svg滤镜

在 SVG 中，可用的滤镜有：

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur——创建模糊效果
feImage
feMerge
feMorphology
feOffset——创建模糊效果
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

必须在 <defs> 标签中定义 SVG 滤镜

<filter> 标签必须嵌套在 <defs> 标签内

<filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像创建效果