HTML5学习--SVG全攻略10bet(基础篇)

来源:http://www.chinese-glasses.com 作者:Web前端 人气:81 发布时间:2020-03-24
摘要:时间: 2019-11-09阅读: 82标签: 指南 明天高级篇 干货系列文章汇总如下,觉得不错点个Star: 一.什么是SVG? SVG 简介 SVG 指的是可伸缩矢量图形 (Scalable VectorGraphics),它用来定义用于网络的基

时间: 2019-11-09阅读: 82标签: 指南

明天高级篇

干货系列文章汇总如下,觉得不错点个Star:

一.什么是SVG?

SVG 简介

SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义用于网络的基于矢量的图形,使用 XML 格式定义图形。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。此外SVG 是万维网联盟的标准,SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。 2003 年一月,SVG 1.1 被确立为 W3C 标准。与其他图像格式相比,使用 SVG 的优势有以下几点:

SVG,即可缩放矢量图形(Scalable Vector Graphics),是一种 XML 应用,可以以一种简洁、可移植的形式表示图形信息。目前,人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形,并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可以概括为以下几点:

1.SVG 可被非常多的工具读取和修改(比如记事本)

2.SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。

3.SVG 是可伸缩的

4.SVG 图像可在任何的分辨率下被高质量地打印

5.SVG 可在图像质量不下降的情况下被放大

6.SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

7.SVG 可以与 Java 技术一起运行

8.SVG 是开放的标准

9.SVG 文件是纯粹的 XML

SVG 指可伸缩矢量图形SVG 用来定义网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 的主要竞争者是 Flash,与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。

SVG 的应用图表视图(echart)、地图视图(WEB-GIS)形象(AI)的全网应用UI 产品的设计SVG 动画SVG 浏览器的兼容情况SVG 与 Canvas 区别图形系统

 

计算机中描述图形信息的两大系统是栅格图形和矢量图形。

学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!

栅格图形

二.SVG 实例

在栅格图形系统中,图像被表示为图片元素或者像素的长方形数组如下图片所示。每个像素用其 RGB 颜色值或者颜色表内的索引表示。这一系列也称为位图,通过以某种压缩格式存储。由于大多数现代显示设备也是栅格设备,显示图像时仅需要一个阅读器将位图解压并将它传输到屏幕上。

下面的例子是一个简单的 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">
     <circle cx="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/>
</svg>

矢量图是基于数学的描述,如下图的多啦A梦,他的头是一条怎么样的贝塞尔曲线,它的参数是什么及用什么颜色来填充贝塞尔曲线,通过这种方式描述图片就是适量图

10bet 1

想象一下在一张绘图纸上作图的过程,栅格图形的工作就像是描述哪个方格应该填充什么颜色,而矢量图形的工作则像是描述要绘制从某个点到另一个点的直线或曲线。

运行结果

创建 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 文档结构:

1.SVG 代码以 < svg > 元素开始,包括开启标签 < svg > 和关闭标签 < /svg > ,这是根元素。
2.widthheight 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。
3.SVG 的 < circle > 用来创建一个圆,cxcy 属性定义圆中心的 xy 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
4.strokestroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽,红色边框。
5.fill 属性设置形状内的颜色。我们把填充颜色设置为原谅色。
关闭标签的作用是关闭 SVG 元素和文档本身。
10bet,注意:所有的开启标签必须有关闭标签!

svg width='140' heiight='170' xmlns='' titleCat/title descStick Figure of Cat/desc !-- 在这里绘制图像 --/svg

HTML 页面中的 SVG
SVG 文件可通过以下标签嵌入 HTML 文档:< embed > 、< object > 或者 < iframe >。

根元素svg以像素为单位定义了整个图像的width和height,还通过xmlns属性定义了SVG的命名空间。title元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示,desc元素允许咱们为图像定义完整的描述信息。

三种把 SVG 文件嵌入 HTML 页面的不同方法。

基本形状和属性

使用 < embed > 标签

基本图形

< embed > 标签被所有主流的浏览器支持,并允许使用脚本。

rect、circle、ellipse、line、polyline、polygon

注释:当在 HTML 页面中嵌入 SVG 时使用 < embed > 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 < embed >。任何 HTML 规范中都没有 < embed > 标签。
语法:

基本属性

< src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">

fill、stroke、stroke-width、transform

注释:pluginspage 属性指向下载插件的 URL。

基本形状 --- 圆形

使用 < object > 标签

咱们可以通过circle元素来绘制猫的脸部。元素属性的中心点x坐标和y坐标以为半径。点(0,0)为图像左上角。水平向右移动时x坐标增大,垂直向下移动时y坐标增大。为了避免一些误会,API 语文就很明确了,点(cx, cy)就表示圆心的位置,r表示圆的半径。

< object > 标签是 HTML 4 的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。

绘图的颜色是表现的一部分,表现信息包含在style属性中,这里的轮廓颜色为黑色,填充颜色为none以使猫的脸部透明。

注释:假如您安装了最新版本的 Adobe SVG Viewer,那么当使用 < object > 标签时 SVG 文件无法工作(至少不能在 IE 中工作)!

svg width='140' heiight='170' xmlns='' titleCat/title descStick Figure of Cat/desc !-- 在这里绘制图像 -- circle cx='70' cy='95' r='50' style='stroke:black; fill:none'/circle/svg 

语法:

指定样式的属性

<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

接着在添加两个圆表示两个眼睛。上面的stroke与fill是写在style里面的,但是SVG也允许咱们使用单独的属性,而不用全部写在style内,如下所示:

注释:codebase 属性指向下载插件的 URL。

svg width='140' heiight='170' xmlns='' titleCat/title descStick Figure of Cat/desc !-- 在这里绘制图像 -- circle cx='70' cy='95' r='50' style='stroke:black; fill:none'/circle circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'/circle circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'/circle/svg

使用 < iframe > 标签

图形对象分组

< iframe > 标签可工作在大部分的浏览器中。

接着使用两个line元素在猫的右脸上添加胡须,先看下线的示意图:

语法:

这很好理解,就不多说了。 这里我们需要把胡须作为一个部件,并包装在分组元素g(后面会讲)里面,然后给下id,如下所示:

<iframe src="rect.svg" width="300" height="100"></iframe>
svg width='140' heiight='170' xmlns='' titleCat/title descStick Figure of Cat/desc !-- 在这里绘制图像 -- circle cx='70' cy='95' r='50' style='stroke:black; fill:none'/circle circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'/circle circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'/circle g id='whiskers' line x1='75' y1='95' x2='135' y2='85' style='stroke:black'/line line x1='75' y1='95' x2='135' y2='105' style='stroke:black'/line /g/svg

三.SVG 各形状介绍

图形对象分组

(一)SVG 矩形
能根据之前的圆形联想到,rect元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。

接着使用use复用胡须分组并将它变换(transfrom) 为左侧胡须,如下图所示,首先在scale变换中对x坐标乘以-1,翻转坐标系统。这意味原始坐标系统中的点(75, 95)现在位于(-75, 95)。接着通过translate向左平移调整对应的位置。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="10" ry="10" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9"/>
</svg>
svg width='140' heiight='170' xmlns='' titleCat/title descStick Figure of Cat/desc !-- 在这里绘制图像 -- circle cx='70' cy='95' r='50' style='stroke:black; fill:none'/circle circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'/circle circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'/circle g id='whiskers' line x1='75' y1='95' x2='135' y2='85' style='stroke:black'/line line x1='75' y1='95' x2='135' y2='105' style='stroke:black'/line /g use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' /use/svg

10bet 2

其他基本图形

运行结果.png

如下图所示,咱们使用polyline元素构建嘴和耳朵,它接受一对x和y坐标为points属性的值。你可以使用空格或者逗号分隔这些数值。

代码解释:

svg width='140' heiight='170' xmlns='' titleCat/title descStick Figure of Cat/desc !-- 在这里绘制图像 -- circle cx='70' cy='95' r='50' style='stroke:black; fill:none'/circle circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'/circle circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'/circle g id='whiskers' line x1='75' y1='95' x2='135' y2='85' style='stroke:black'/line line x1='75' y1='95' x2='135' y2='105' style='stroke:black'/line /g use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' /use !-- 耳朵 -- polyline points='108 62,90 10, 70 45, 50, 10, 32, 62' style='stroke:black; fill:none' / !-- 嘴 -- polyline points='35 110,45 120, 95 120, 105, 110' style='stroke:black; fill:none'//svg

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1
CSS 的 opacity 属性定义整个元素的透明值(合法的范围是:0 - 1)
rx 和 ry 属性可使矩形产生圆角。

路径

(二)SVG 圆形:详细见上svg实例

所有的基本形状都是通用的path元素的快捷写法。接着使用path元素为猫添加鼻子。如下所示的代码,翻译过来就是 "移动到坐标(75, 90)。绘制一条到坐标(65,90)的直线。然后以x半径为5、y半径为10绘制一个椭圆,最后回到坐标(75, 90)处"

(三)SVG椭圆:
ellipse 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的。

svg width='140' heiight='170' xmlns='' titleCat/title descStick Figure of Cat/desc !-- 在这里绘制图像 -- circle cx='70' cy='95' r='50' style='stroke:black; fill:none'/circle circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'/circle circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'/circle g id='whiskers' line x1='75' y1='95' x2='135' y2='85' style='stroke:black'/line line x1='75' y1='95' x2='135' y2='105' style='stroke:black'/line /g use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' /use !-- 耳朵 -- polyline points='108 62,90 10, 70 45, 50, 10, 32, 62' style='stroke:black; fill:none' / !-- 嘴 -- polyline points='35 110,45 120, 95 120, 105, 110' style='stroke:black; fill:none'/ !-- 鼻子 -- path d='M 75 90 L 65 90 A 5 10 0 0 0 75 90' style='stroke:black; fill:#ffcccc' //svg
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

路径

10bet 3

由于这只是一个简单的图形,用户可能看不出这是一只猫,所以咱们可以使用 text 元素添加一些文本注释。在 text 元素中,x 和 y 属性用于指定文本的位置,如下所示:

运行结果.png

svg width='140' height='170' xmlns='' xmlns:xlink='' titleCat/title descStick Figure of Cat/desc !-- 在这里绘制图像 -- circle cx='70' cy='95' r='50' style='stroke:black; fill:none'/circle circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'/circle circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'/circle g id='whiskers' line x1='75' y1='95' x2='135' y2='85' style='stroke:black'/line line x1='75' y1='95' x2='135' y2='105' style='stroke:black'/line /g use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' /use !-- 耳朵 -- polyline points='108 62,90 10, 70 45, 50, 10, 32, 62' style='stroke:black; fill:none' / !-- 嘴 -- polyline points='35 110,45 120, 95 120, 105, 110' style='stroke:black; fill:none'/ !-- 鼻子 -- path d='M 75 90 L 65 90 A 5 10 0 0 0 75 90' style='stroke:black; fill:#ffcccc' / text x="60" y="165" style='font-family:sans-serif;font-size: 14pt; stroke:none; fill: black; 'Cat/text

代码解释:

如果看不懂代码,没关系,后面几章节会深入这些基本及属性。

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

在网页中使用 SVG

(四)SVG线条
line 标签用来创建线条

SVG 是一种图件格式,因此可以使用与其他图像类型相同的方式包含在 HTML 页面中。具体可以采用两种方法:将图像包含在img元素内(当图像是页面的基本组成部分时,推荐这种方式);或者将图像作为另一个元素的 CSS 样式属性插入(当图像主要用来装饰时,推荐这种方式)。

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

在 img 元素内包含 SVG

10bet 4

在img元素内包含 SVG 图像非常简单,只需设置src指向 SVG 文件位置即可。如下:

运行结果.png

img src='cat.svg' alt=''/

代码解释:

在 CSS 中包含 SVG

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

可以使用 background-image 属性来显示 SVG,如果没有固有尺寸, SVG 会被缩放为元素高度和宽度的 100%,如下所示:

(五)SVG多边形
polygon 标签用来创建含有不少于三个边的图形。它们都是由连接一组点集的直线构成。polygon的路径在最后一个点处自动回到第一个点。需要注意的是,矩形也是一种多边形,如果需要更多灵活性的话,你也可以用多边形创建一个矩形。

div.background-cat { background-image: url('cat.svg'); background-size: 100% 100%;}
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>

使用 object 标签引入 SVG (不推荐)

10bet 5

object元素的type属性表示要嵌入的文件类型。这个属性应该是一个有效的网络媒体类型(通常被称为 MIME 类型)。对于SVG,使用type='image/svg+xml'。如下所示:

运行结果.png

object data='cat.svg' type='image/svg+xml' width='100' height='100'/

代码解释:

在网页中直接使用 SVG 标签

points 属性定义多边形每个角的 x 和 y 坐标
点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字,一个是x坐标,一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样:“0 0, 1 1, 2 2”。路径绘制完后闭合图形,所以最终的直线将从位置(2,2)连接到位置(0,0)。

直接引用 svg 定即可,如下所示:

(六)SVG 折线
polyline 标签用来创建仅包含直线的形状。它是一组连接在一起的直线。因为它可以有很多的点,折线的的所有点位置都放在一个points属性中:

svg width='140' heiight='170' xmlns='' titleCat/title descStick Figure of Cat/desc !-- 在这里绘制图像 -- circle cx='70' cy='95' r='50' style='stroke:black; fill:none'/circle/svg 
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline points="20,100 40,60 70,80 100,20" style="fill:white;stroke:red;stroke-width:2"></polyline>
</svg>

SVG 的视窗,视野和全局(世界)

10bet 6

视窗

运行结果.png

SVG的属性width、height来控制视窗的大小,也称为SVG容器

points
点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字,一个是x坐标,一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样:“0 0, 1 1, 2 2”。路径绘制完后闭合图形,所以最终的直线将从位置(2,2)连接到位置(0,0)。

世界

四.SVG 滤镜简介

SVG里面的代码,就是对SVG世界的定义

 所有互联网的SVG滤镜定义在 < defs > 元素中, < filter > 标签用来定义SVG滤镜, < filter > 标签使用必须的ID属性来定义向图形应用到那个滤镜中。在 SVG 中,可用的滤镜有:

视野

feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix SVG 滤镜。应用matrix转换。
feComponentTransfer SVG 滤镜。执行数据的 component-wise 重映射。
feComposite SVG 滤镜。
feConvolveMatrix SVG 滤镜。
feDiffuseLighting SVG 滤镜。
feDisplacementMap SVG 滤镜。
feDistantLight SVG 滤镜。 Defines a light source
feFlood SVG 滤镜。
feGaussianBlur SVG 滤镜。对图像执行高斯模糊。
feImage SVG 滤镜。
feMerge SVG 滤镜。创建累积而上的图像。
feMorphology SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。
feOffset SVG 滤镜。相对与图形的当前位置来移动图像。
fePointLight SVG 滤镜。
feSpecularLighting SVG 滤镜。
feSpotLight SVG 滤镜。
feTile SVG 滤镜。
feTurbulence SVG 滤镜。

世界是无穷大的,视野是观察世界的一个矩形区域。如下图所示

注释:您可以在每个 SVG 元素上使用多个滤。

世界不可变,而视野是可以改变的。在SVG中,提供了viewBox和preserveAspectRatio属性来控制视野。

(一)SVG 高斯滤镜
< filter > 标签必须嵌套在 < defs > 标签内。< defs > 标签是 definitions 的缩写,它允许对诸如滤镜等特殊元素进行定义。

线段

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="Gaussian_Blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
  </defs>
  <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

SVG 可以使用 line 元素画出一条直线,使用只需要指定线段的起(x1, y1)止(x2, y2)点。

10bet 7

svg width='140' height='170' xmlns='' line x1='0' y1='0' x2='100' y2='100' style='stroke:black'//svg

运行结果.png

笔画的特性

代码解释:

线段可以看作画面上画出来的笔画。笔画的尺寸、颜色和风格都会影响线段的表现。这些特性都可以在style属性指定。

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

stroke-width

(二)SVG 阴影效果
feOffset 元素用于创建阴影效果
偏移一个矩形(带 < feOffset > ),然后混合偏移图像顶部(含 < feBlend > )
SVG代码:

stroke-width是设置线段的粗细,如下所示:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>
svg width='140' height='170' xmlns='' line x1='0' y1='0' x2='100' y2='100' style='stroke-width:10;stroke:black'//svg

10bet 8

笔画的颜色和透明度

运行结果.png

可以通过以下几种方式指定笔画颜色:

代码解释
< filter > 标签的 id 属性可为滤镜定义一个唯一的名称(同一滤镜可被文档中的多个元素使用)
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时,必须使用 # 字符

本文由10bet发布于Web前端,转载请注明出处:HTML5学习--SVG全攻略10bet(基础篇)

关键词:

最火资讯