38、HTML进阶——SVG

最新推荐文章于 2024-08-14 12:55:09 发布

lvh98

最新推荐文章于 2024-08-14 12:55:09 发布

阅读量876

点赞数

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： html css 前端

本文链接：https://blog.csdn.net/lvh98/article/details/126370045

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

svg

svg: scalable vector graphics，可缩放的矢量图

该图片使用代码书写而成
缩放不会失真
内容轻量

SVG是一种XML语言，类似 XHTML，可以用来绘制矢量图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。

1. 怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件。

1.直接嵌入：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="icon" p-id="2056" style="" t="1558689414500" version="1.1" viewBox="0 0 1024 1024">
<defs>
    <style type="text/css" />
    </defs>
    <path fill="#34950e" d="M236.24 323.769c0 24.005 19.32 43.325 43.325 43.325s43.326-19.32 43.326-43.325c0-24.005-19.321-43.325-43.326-43.325-24.004 0-43.325 19.32-43.325 43.325z m336.064 223.067c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958-33.958 15.223-33.958 33.958zM456.38 323.769c0 24.005 19.32 43.325 43.325 43.325 24.005 0 43.325-19.32 43.325-43.325 0-24.005-19.32-43.325-43.325-43.325-24.005 0-43.325 19.32-43.325 43.325z" p-id="2057"/>
    <path fill="#34950e" d="M858.017 0H165.983C74.648 0 0.293 74.356 0.293 166.276v690.863c0 91.92 74.355 166.276 165.69 166.276h692.034c91.335 0 165.69-74.356 165.69-166.276V166.276C1023.707 74.94 949.352 0 858.017 0zM384.366 686.18c-38.642 0-69.672-8.197-108.899-15.808L167.154 724.82l31.03-93.09C120.316 577.28 74.063 507.022 74.063 422.128c0-147.54 139.929-264.05 310.303-264.05 152.81 0 286.298 93.09 313.23 217.798a255.341 255.341 0 0 0-29.859-1.757c-147.54 0-264.05 110.07-264.05 245.315 0 22.834 3.513 44.496 9.367 64.988-9.367 1.171-18.735 1.757-28.688 1.757z m457.843 108.313l23.42 77.283-84.895-46.838c-31.03 7.61-62.06 15.808-93.09 15.808-147.541 0-264.051-100.703-264.051-225.41 0-124.12 116.51-225.408 264.05-225.408 139.344 0 263.465 101.288 263.465 225.409-0.585 70.843-46.838 132.903-108.899 179.156z" p-id="2058"/>
    <path fill="#34950e" d="M741.507 546.836c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958c-19.32 0-33.958 15.223-33.958 33.958z" p-id="2059"/>
</svg>

单独保存一个文件，再在html文件中引入：

img元素：<img src="imgs/weixin.svg" alt="">
embed元素：<embed src="imgs/weixin.svg" type="image/svg+xml">
object元素：<object data="imgs/weixin.svg" type="image/svg+xml"></object>
iframe元素：<iframe src="imgs/weixin.svg"></iframe>
背景图：
html:<p></p>
css:p{background: url("imgs/weixin.svg") no-repeat center/cover;}

xml语言，svg使用该语言定义

2. 书写svg代码

HTML 提供了定义标题、段落、表格等等内容的元素。与此类似，SVG 也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的 SVG 文档由<svg>根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。

新建一个.svg文件，添加<svg></svg>根元素，

基于XML语言的特点，SVG书写时需要注意：

SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 HTML 不同）;
SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。

在svg根元素中，可以定义svg的初始大小（width/height）（注意数值没有单位），也可以使用style设置CSS样式。

<svg style="background:#ccc;" width="500" height="1000" xmlns="http://www.w3.org/2000/svg">
</svg>

其中xmlns是SVG的命名空间。

2.1 矩形: rect

<rect />

宽高依然可以使用width/height来设置，数值是没有单位的。
填充颜色可以使用fill来设置，颜色的取值同CSS。
边框（描边）可以使用strock来设置边框颜色，strock-width来设置边框宽度。
矩形位置可以通过x/y来调节，x表示矩形左上角离根元素svg的左上角的水平距离，y表示矩形左上角距离svg元素左上角的垂直距离。
rx和ry分别表示圆角的x/y方位的半径。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="50" y="50" rx="10" ry="20" fill="#f40" stroke="#008c8c" stroke-width="20"/>
</svg>

rect

2.2 圆形：circle

r：圆的半径；
cx：圆心的x位置；
cy：圆心的y位置。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="50" y="50" rx="10" ry="20" fill="#f40" stroke="#008c8c" stroke-width="2"/>
    <circle r="50" cx="100" cy="100" fill="#444" stroke="#fff"/>
</svg>

circle

2.3 椭圆：ellipse

rx：椭圆的 x 半径；
ry：椭圆的 y 半径；
cx：椭圆中心的 x 位置；
cy：椭圆中心的 y 位置。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <ellipse rx="50" ry="100" cx="200" cy="200" fill="#e6e6e6"/>
</svg>

ellipse

2.4 线条：line

x1：起点的 x 位置；
y1：起点的 y 位置；
x2：终点的 x 位置；
y2：终点的 y 位置。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="300" y2="300" stroke="#000" stroke-width="3"/>
</svg>

line

2.5 折线：polyline

Polyline是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个 points 属性中。

points：里面写入所要连接的点的坐标，数字之间用逗号或空格隔开。

点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。

默认会自动将points的首尾相连，并自动填充。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <polyline points="50 50, 100 50, 100 100, 50 100" fill="none" stroke="#000" stroke-width="2"/>
</svg>

ployline

2.6 多边形：polygon

polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <polygon points="50 50, 100 50, 100 100, 50 100" fill="none" stroke="#000" stroke-width="2"/>
</svg>

ploygon

2.7 路径：path

M(moveto)
移动画笔，但不画线。一般M命令出现在路径的开始处，用来指明从何处开始画；
L(lineto)
在当前位置和新位置之间画一条线段；

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M100 100 L150 100 L150 180 Z" fill="none" stroke="#000" stroke-width="3"/>
</svg>

path1

H(horizontal lineto)
绘制水平线，只带一个参数，标明x轴移动到的位置；
V(vertical lineto)
绘制垂直线，只带一个参数，标明y轴移动到的位置；

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M100 100 H300 V200" fill="none" stroke="#000" stroke-width="3"/>
</svg>

path2

C(curveto)
贝塞尔曲线，
S(smooth curveto)
Q(quadratic Belzier curve)
T(smooth quadratic Belzier curveto)
A(elliptical Arc)
参数：半径1、半径2、顺时针旋转角度、小弧（0）或大弧（1）、顺时针（1）逆时针（0）、终点坐标。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M300 300 A200 200 0 0 0 500 100" fill="none" stroke="#000" stroke-width="3"/>
</svg>

path3

Z(closepath)
闭合路径

3. 例子

画太极图

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M300 50 A75 75 0 0 1 300 200 A75 75 0 0 0 300 350 A150 150 0 0 1 300 50" fill="#000" />
    <path d="M300 50 A75 75 0 0 1 300 200 A75 75 0 0 0 300 350 A150 150 0 0 0 300 50" fill="#fff" />
    <circle r="30" cx="300" cy="125" fill="#fff" />
    <circle r="30" cx="300" cy="275" fill="#000" />
</svg>