svg 学习笔记（各种元素）

最新推荐文章于 2023-06-29 20:18:50 发布

荔枝

最新推荐文章于 2023-06-29 20:18:50 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签： css javascript path 图形 xml

本文链接：https://blog.csdn.net/a569171010/article/details/7564816

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

观看者：有xml，javascript基础的同学

目标：掌握svg基础图形

实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。

svg 简单的例子：

<!DOCTYPE html>
<html>
<body>
<svg version="1.1" style="width:100%;height:100%"  xmlns:svg="http://www.w3.org/2000/svg">
<path d="M100 5 L5 100 L100 100Z" style="stroke:rgb(99,99,99);stroke-width:2" />
</svg>
</body>
</html>

svg 比vml更方便，只需将xmlns:svg="http://www.w3.org/2000/svg"添加到svg标签中就可以使用svg：

矩形：

<!DOCTYPE html>
<html>
<body>
<svg version="1.1" style="width:100%;height:100%"  xmlns:svg="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
</body>
</html>

rect 元素：
x,y 元素左上角的坐标
width,height 属性可定义矩形的高度和宽度
rx,ry可以修改圆角
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
style中的fill，stroke-width，stroke，opacity也都可以放在style外面当做单独的属性，如：

<!DOCTYPE html>
<html>
<body>
<svg version="1.1" style="width:100%;height:100%"  xmlns:svg="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" fill="red" stroke="black" stroke-width="5" opacity="0.5" />
</svg>
</body>
</html>

和上面是一样的。

圆形：

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

cx,cy 圆点的 x 和 y 坐标，默认为0,0
r 圆的半径，拥有和上面rect的一样的属性。

椭圆：

<!DOCTYPE html>
<html>
<body>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80"style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
</body>
</html>

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
这和vml有很不一样了，vml圆是oval，通过定义长短半轴来确定是不是椭圆。

直线：

<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
当然我很可以用path来取代line

多边形：

<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>

points是定义点的坐标，这个多边形vml里面是没有的。

折线：

<!DOCTYPE html>
<html>
<body>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"style="fill:white;stroke:red;stroke-width:2"/>
</svg>
</body>
</html>

points定义点的坐标跟vml中polyline一样。

文本：

<!DOCTYPE html>
<html>
<body>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x='100' y='100' dx='0' dy='0' rotate='30' textLength='100'>hello world</text>
</svg>
</body>
</html>

x,y 定义坐标
dx,dy追加的位移
rotate偏转角度
textLength 文本总长度

关于path 暂时不说了，后面我会结合vml详细讲述。

荔枝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg 学习笔记（各种元素）

观看者：有xml，javascript基础的同学目标：掌握svg基础图形实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。svg 简单的例子：svg 比vml更方便，只需将xmlns:svg="http://www.w3.org/2000/svg"添加到svg标签中就可以使用svg：矩形：
复制链接

扫一扫

专栏目录