Web端SVG的绘制

Web端SVG的绘制

svg 是使用xml来描述二维图形和绘图程序的语言
1.是可伸缩矢量图形
2.和普通格式相比，尺寸更小，可压缩性更强
3.文本是可选的，同时也是可搜素的，（适合地图）

在html中使用

使用 < embed>标签

允许使用脚本
不推荐在html和html4，html5可以

<embed src="circle1.svg" type="image/svg+xml" />

使用 object 标签

支持html4和xhtml 和html5
不允许使用脚本

<object data="circle1.svg" type="image/svg+xml"></object>

使用iframe标签

允许使用脚本
不推荐在html和html4，html5可以

<iframe src="circle1.svg"></iframe>

也可以直接内嵌在html中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

也可以使用超文本链接到文件

<a href="circle1.svg">查看 SVG 文件</a>

形状绘制

矩形 rect

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 
<rect x="50" y="20" rx="20" ry="20" width="300" height="100"
 
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

x：定义矩形的左侧位置
y：定义矩形的顶端位置
rx：定于矩形的横向圆角
ry：定义矩形的垂直圆角

圆形 Circle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 
<circle cx="100" cy="50" r="40" stroke="black"
 
stroke-width="2" fill="red"/>
</svg>

cx，cy 定义圆的中心点
r 定义圆的半径

直线 line

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 
<line x1="0" y1="0" x2="200" y2="200"
 
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

x1：x轴线条开始的x
y1：y轴线条开始的y
x2：x轴线条结束的x
y2：y轴线条结束的y

多边形 polygon

多边形是由直线组成，其形状是封闭的，所有线条链接起来

<!-- 五角星-->

<polygon points="200,10 300,300 100,100,300,100,100,300" fill="blue" stroke-width="5" stroke="purple" fill-rule="evenodd"/>

stroke ：设置线条的大小和颜色
fill-rule：设置填充规则
nonzero： 这是默认值。在非零填充规则下，如果从任意点发射一条射线，交叉路径的数量（顺时针路径减去逆时针路径）不为零，那么该点被认为在填充区域内
evenodd ：在奇偶填充规则下，通过射线的路径的数量为奇数时，该点被认为在填充区域内；如果路径的数量为偶数，则被认为在填充区域外

多段直线 polyline

<polygon points="200,10 300,300 100,100,300,100,100,300" fill="blue" stroke-width="5" stroke="purple" fill-rule="evenodd"/>

路径path

元素是SVG（Scalable Vector Graphics）中用来创建形状的基本元素之一。它通过指定一系列的线条、曲线和形状命令来定义路径。这些路径命令可以包括移动到某一点、画直线、画曲线等等，可以创建各种各样的图形。

<svg>
  <path d="M 100 100 L 200 100 L 150 200 Z" />
</svg>

其中，d 属性用于指定路径命令。路径命令是一系列字母和数字的组合，每个字母代表一个路径指令，数字表示与路径相关的参数。常见的路径指令包括：

M/m: 移动到（Move To）
L/l: 画直线到（Line To）
H/h: 画水平线到（Horizontal Line To）
V/v: 画垂直线到（Vertical Line To）
C/c: 画三次贝塞尔曲线（Cubic Bezier Curve）
S/s: 平滑三次贝塞尔曲线（Smooth Cubic Bezier Curve）
Q/q: 画二次贝塞尔曲线（Quadratic Bezier Curve）
T/t: 平滑二次贝塞尔曲线（Smooth Quadratic Bezier Curve）
A/a: 画弧（Arc）

注意：大写表示绝对定位，小写表示相对定位

文本 text

基础写法：

<svg>
  <text x="100" y="100" font-size="20" fill="red">Hello, SVG!</text>
</svg>

进阶写法

<svg>
  <text x="100" y="100" font-size="20" fill="red" text-anchor="middle" text-decoration="underline">Hello, SVG!</text>
</svg>

text-anchor: 指定文本的对齐方式，可以是 start、middle 或 end，分别表示文本的左侧、中心或右侧与指定的坐标对齐。
text-decoration: 指定文本的装饰效果，可以是 none、underline、overline 或 line-through。
text-transform: 指定文本的转换效果，可以是 none、uppercase、lowercase 或 capitalize。
letter-spacing: 指定字符间的间距。
word-spacing: 指定单词间的间距。
writing-mode: 指定文本的书写模式，可以是 lr-tb（从左到右、从上到下）、rl-tb（从右到左、从上到下）等。

滤镜

模糊（blur）

通过模糊元素的边缘来创建柔和的外观。可以使用 < feGaussianBlur> 元素来实现。

颜色矩阵 Color Matrix

通过矩阵转换来改变元素的颜色。可以使用 < feColorMatrix> 元素来实现。

阴影 Drop Shadow

在元素周围创建一种模拟阴影的效果。可以使用 < feDropShadow> 元素来实现。

光照 Lighting

模拟光照效果，例如投射光、漫反射、镜面反射等。可以使用 < feDiffuseLighting> 和 < feSpecularLighting> 元素来实现

抠图（Masking）

根据另一个图形元素的轮廓来遮罩原始元素，只显示轮廓内的部分。可以使用 < feMask> 元素来实现

合成（Composite）

将两个图形元素合成在一起，可以通过不同的合成模式来控制合成效果。可以使用 < feComposite> 元素来实现。