SVG绘制基础图形学习笔记

2021.1.26

SVG基础学习笔记

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像

位图和矢量图

位图：由像素点组合而成的图像，放大会失真。
矢量图：以数学向量方式记录图像，任意放大清晰度不变。

引入svg

• svg是基于xml的技术
• svg文件必须使用.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>

代码解释：
第一行包含了 XML 声明。请注意 standalone 属性。该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。

standalone=“no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

关闭标签的作用是关闭 SVG 元素和文档本身。

Note：所有的开启标签必须有关闭标签！

SVG形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

SVG矩形

<rect> 标签:
<rect> 标签可用来创建矩形，以及矩形的变种。

<?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">

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

</svg>

Note:下文将省略代码的重复内容。绘制新的图形只需要替换这里的<rect>标签

代码解释：

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>

代码解释：

• x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
• y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
• CSS 的 stroke-opacity 属性定义边框颜色的透明度（合法的范围是：0 - 1）

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>

代码解释：
CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）

<rect x="20" y="20" rx="20" ry="20" width="250" height="100" 
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>

代码解释：
rx 和 ry 属性可使矩形产生圆角。用于创建圆角矩形。

SVG圆形

<circle> 标签:
<circle> 标签可用来创建一个圆。

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

代码解释：

• cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
• r 属性定义圆的半径。

SVG椭圆

<ellipse>标签：
<ellipse> 标签可用来创建椭圆。
椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>

代码解释：

• rx 属性定义水平半径
• ry 属性定义垂直半径

SVG线条

<line> 标签：
<line> 标签用来创建线条。

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

代码解释：

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

SVG多边形

<polygon> 标签:
<polygon> 标签用来创建含有不少于三个边的图形。

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

代码解释：

• points 属性定义多边形每个角的 x 和 y 坐标

SVG折线

<polyline> 标签：
<polyline> 标签用来创建仅包含直线的形状。

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

SVG路径

<path> 标签：
<path> 标签用来定义路径。

下面的命令可用于路径数据：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Belzier curve
• T = smooth quadratic Belzier curveto
• A = elliptical Arc
• Z = closepath

Note：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

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

代码解释：

• 上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

代码解释：

• 定义了一个螺旋，但是没有看懂。

SVG滤镜（未学）

SVG渐变

SVG 渐变必须在 <defs> 标签中进行定义。

渐变是一种从一种颜色到另一种颜色的平滑过渡。
另外，可以把多个颜色的过渡应用到同一个元素上。

在 SVG 中，有两种主要的渐变类型：

• 线性渐变
• 放射性渐变

SVG线性渐变

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

线性渐变可被定义为水平、垂直或角形的渐变：

当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 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="55"
style="fill:url(#orange_red)"/>

代码解释：

• <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
• fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
• <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
• 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。
• offset 属性用来定义渐变的开始和结束位置。

<defs>
    <linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
        <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="55"
style="fill:url(#orange_red)"/>

代码解释：

• 垂直渐变

放射性渐变（未学）