SVG的基本使用方法

SVG的使用方法

编程少女拉克丝@

4227人浏览 · 2022-07-03 18:38:02

编程少女拉克丝@ · 2022-07-03 18:38:02 发布

一、简介
SVG是使用XML来描述二维图形和绘图的程序语言，2003年1月14成为W3C推荐标准；
特性：
1、是一种可伸缩矢量图形
2、是使用xml格式定义用于网络的基于矢量的图形
3、放大或改变图片的尺寸其质量不会有所损失
4、SVG文件必须使用.svg后缀来保存

SVG图形的创建（分两种方式）

html中直接创建：
   <svg width="" height="" version="1.1"
   xmlns="http://www.w3.org/2000/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="100%" height="100%" version="1.1"
   xmlns="http://www.w3.org/2000/svg">
       // 插入需要的图片
   </svg>
SVG文件可通过一下标签嵌入HTML(外部的引入的.svg文件方式)：

二、圆形（<circle>标签）

<circle cx="50" cy="50" r="20" stroke="black" stroke-width="2"
fill="red">
注解：
   cx和cy属性定义圆形的x和y坐标
   stroke: 定义黑色圆背景
   stroke-width: 定义圆边框宽度
   fill: 定义边框颜色
三、椭圆（<ellipse>标签）

<ellipse cx="200" ct="150px"
style="fill:rgb(200, 100, 50); stroke:rgb(0,0,100); stroke-width:2;">

注解：
   cx: 圆点的x坐标
   cy: 圆点的y坐标
   rx: 水平半径
   ry: 垂直半径
四、线条（<line> 标签）

<line x1="0" y1="0" x2="300" y2="300" style="stroke: rgb(99,99,99); stroke-width:2" />

x1, y1线条开始的位置；x2, y2线条结束的位置
五、多边形（<polygon> 标签）

<polygon points="220,100 300,210 170,250" style="fill: #ccc; stroke: #000; stroke-width:1" />

注解：points属性定义多边形每个角的x 和 y 坐标
六、折线（<polyline>标签）

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white; stroke:red; stroke-width: 2" />

注解： points属性定义折现每个拐角的 x 和 y 坐标
七、路径（<path> 标签）

<path d="M250 150 L150 350 L350 350 Z" />

路径数据：
   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(光滑二次Belzier曲线)
   A = elliptical Arc(椭圆弧)
   Z = closepath(关闭路径)
三、渐变
SVG渐变必须在标签中进行定义，渐变类型包括：线性渐变和放射性渐变
: 他可对诸如渐变之类的特殊元素进行定义

线性渐变（<linearGradient>标签）：
1、水平渐变：y1 = y2, x1 != x2
2、垂直渐变：x1 =x2, y1 != y2
3、角形渐变：x1 != x2, y1 != y2

// 定义
<defs>
   <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%"
       style="stop-color:rgb(255,255,0); stop-opacity: 1" />
       <stop offset="100%"
       style="stop-color:rgb(255,0,0); stop-opacity: 1" />
   </linearGradient>
</defs>
// 应用
<ellipse cx="200" cy="190" rx="85" ry="50" style="fill: url(#orange_red)" />

注解：
1、fill:url(#orange_red) 属性把ellipse元素链接到此渐变
2、标签的x1,x2,y1,y2属性定义渐变的开始和结束位置
3、标签定义渐变颜色的组成部分，offset属性来定义渐变的开始和结束位置

放射性渐变（<radialGradient>标签）：

// 定义
<defs>
   <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
   fx="50%" fy="50%">
       <stop offset="0%"
           style="stop-color: rgb(200,200,200); stop-opacity:0">
       <stop offset="100%"
           style="stop-color: rgb(0,0,255); stop-opacity: 1">
   </radialGradient>
</defs>
//用应
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
注解：
1、cx,cy属性定义外圆
2、fx,fy属性定义内圆

滤镜
fe开头的元素都是滤镜，如下高斯模糊：
高斯模糊（<feGaussianBlur>标签）

// 定义
<defs>
   <filter id="Gaussian_Blur">
       <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
   </filter>
</defs>
// 应用
<ellipse cx="200" cy="150" rx="70" ry="40"
   style="fill: #ff00; stroke: #0000; stroke-width: 2;
   filter: url(#Gaussian_Blur)"
/>
注解：
1、filter:url属性用来把元素链接到滤镜
2、stdDeviation：属性用于定义模糊程度
3、in=“SourceGraphic” 定义有整个图像创建效果

容器中常用元素
指在svg中经常使用的一些标签元素：

defs: 用来存储后续将要用到的图像，通过fill:url(id)进行引用
g: 用于对其他SVG元素进行分组容器，在其元素上设置属性和变换会影响g分组的所有元素
mask: 用于定义一个alpha通道，将当前对象合成到背景中
pattern: 定义一个填充对象，这个对象可在其寄宿元素内重复、平铺以沾满其元素
marker: 用于在给定的<path>、<line>、<polyline>或<polygon>元素上绘制箭头或多点标记的图形
symbol:定义一个模板元素,通过use属性引用