SVG文件

xiaoxiao2021-02-28 84

Scalable Vector Graphics（可缩放矢量图形）是基于XML，用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。SVG本身允许包含3种图形对象类型：

矢量图形，包括矩形、圆、椭圆、多边形、直线、任意曲线等。嵌入外部图像，包括png、jpeg、svg等。文本。

1、 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

2、SVG 文件可通过以下标签嵌入 HTML 文档：<embed>（推荐在HTML5中，允许使用脚本）、<object>（支持HTML4，XHTML和HTML5标准，不允许使用脚本）或者 <iframe>（推荐在HTML5中使用，允许使用脚本）。

SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。

3、在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。SVG不能直接嵌入到Opera。

4、

运行结果：

代码如下：

<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> </body> </html> 第二种情况：

运行结果：

代码如下：

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

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。默认情况下，SVG其子元素的大小多大，完全会显示出来。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

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

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

第三种情况：

运行结果为：

代码为：

<!DOCTYPE html> <html> <body> <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> </body> </html> 其中另一种写法为： <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" style="fill:rgb(255,0,0);stroke-width:2;stroke:rgb(0,0,0)" /> </svg> </body> </html>

二、SVG中子标签

矩形 - <rect>

1、代码如下： <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> </svg> </body> </html>其中style的另两种写法为：<rect width="300" height="100" style="fill:blue;stroke-width:1;stroke:black" /> ：stroke="black" stroke-width="2" fill="red" 代码解析: rect 元素的 width 和 height 属性可定义矩形的高度和宽度 style 属性用来定义 CSS 属性 CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） CSS 的 stroke-width 属性定义矩形边框的宽度 CSS 的 stroke 属性定义矩形边框的颜色

2、 fill-opacity透明度属性的使用，其实fill-opacity是不透明性的值，即不透明的值越小，透明的值就越大。取值范围（0-1），代码如下： <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="100" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> </svg> </body> </html> 代码解析： x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px） y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px） CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1） CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1） <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/> 中的opacity定义了元素的透明值。 (范围: 0 到 1)。 3、 <rect x="50" y="20" rx="50" ry="40" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />其中： rx 和 ry 属性可使矩形产生圆角。

SVG 圆形 - <circle>

1、 <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属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0) r属性定义圆的半径

SVG 椭圆 - <ellipse>

1、 <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg> </body> </html>

代码解析：

CX属性定义的椭圆中心的x坐标 CY属性定义的椭圆中心的y坐标 RX属性定义的水平半径 RY属性定义的垂直半径运行结果为：

SVG 直线 - <line>

1、 <!DOCTYPE html> <html> <body> <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> </body> </html>运行结果为： x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束

SVG 多边形 - <polygon>

1、 <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> </svg> </body> </html> points 属性定义多边形每个角的 x 和 y 坐标注意：坐标值是按角的顺时针写的。运行结果为：使用 <polygon> 元素创建一个星型: <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/> </svg> </body> </html> 运行结果为：改变 fill-rule 属性为 "evenodd": <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/> </svg> </body> </html>运行结果为：五角星的另一种画法顺序： <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:red;stroke:black;stroke-width:1;fill-rule:nonzero"/> </svg> points="100,0 160,180 10,60 190,60 40,180"，起始点是最上方的点，然后是右下，最左边，最右边，再到左下。把这些点按顺序连起来就变成了五角星。结果为：先看看官方文档里面fill-rule两个属性的解释， nonzero—这个规则通过从canvas上的某个点往任一方向绘制射线到无穷远，然后检查图形的线段和射线相交的点，来确定“内部区域”。从0开始计数，每次路径线段是从左到右穿过射线就加一，从右到左的就减一。通过计算交叉点，如果结果是0，则这个点在路径外边，不然，就是在里边。 evenodd—这个规则通过从canvas上某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；

如果是偶数，该点在图形外部。

一看两幅图，你可能会有两个疑问，这些线段的箭头是什么？两组图形的第三幅图为什么是一样的？其实这些线段的方向是由我们给出的坐标的顺序决定的，points="100,0

160,180 10,60 190,60 40,180"，起始点是最上方的点，然后是右下，最左边，最右边，再到左下。把这些点按顺序连起来就变成了五角星。

先在图上随机取几个点，蓝色射线的起始点就是随机的点，射线1,2,3,4穿过的图形线段数分别是1,2,3,4，如图

先看nozero时，怎么判断点是否在内部区域。射线1和图形线段只有一个交点，为从左到右，所以结果是1，判定为内部区域；射线2有两个交点，都是从左到右，结果是2，内

部区域；射线3有三个交点，两个从左到右，一个从右到左，结果是1，内部区域；射线4有四个交点，两个从左到右，两个从右到左，结果是0，所以是外部区域。

evenodd时，只判断交点个数，所以1,3都是内部区域，2，4都是外部区域。

结果就很清楚啦，那两组图的第三个图为什么是一样的，也一目了然啦，在圆环内的点，与图形线段的交点有两个，一左进右出，一右进左出，所以两种判定方式下都是外部区

域。

SVG 曲线 - <polyline>

1、 <polyline> 元素是用于创建任何只有直线的形状： <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg> </body> </html> 运行结果：曲线style中fill是干嘛使得： <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:blue;stroke:red;stroke-width:4" /> </svg> </body> </html> 运行结果如下： <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:blue;stroke:black;stroke-width:3" /> </svg> </body> </html> 运行结果为：

SVG 路径 - <path>

1、

<path> 元素用于定义一个路径。

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

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

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

<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L50 200 L225 200 Z" /> </svg> </body> </html>结果为：修改： <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300"> <path d="M150 0 L75 200 L225 200 Z" style="fill:blue; stroke:red; stroke-width:5 "/> </svg> </body> </html> 将画笔移动到指定坐标位置 -> 画一条直线到指定坐标位置 -> 再画一条曲线 -> 完成后抬起画笔结束结果为：疑问： 1、 <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L225 100 L75 200 Z" /> </svg> </body> </html>结果为： 2、没看懂代码 <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450"> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />  <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g>  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g> </svg> </body> </html> 运行结果为： 3、xmlns和xlink两者命名空间的理解是什么？ <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="https://www.baidu.com/" target="_blank"> <text x="0" y="15" fill="red">I love SVG</text> </a> </svg> </body> </html> 运行结果：文字I love SVG是连接到了百度网页属性的小总结： fill---------------------------是定义的填充色，支持“none”、“current-color”值或颜色。不支持梯度。 stroke----------------定义如何绘制元素。支持“none”、“current-color”值或颜色。不支持阵列和梯度。 text-------------------文本颜色是笔画颜色定义的颜色，如果没有明确定义笔画颜色，则使用填充颜色。（<textx="0"y="15"fill="red">在平坦的路上曲折前行</text>x="0" y="15" 是文字定位坐标；）

转载请注明原文地址: https://www.6miu.com/read-80416.html

技术

最新回复(0)