4. svg学习笔记-文档结构元素和样式的使用

时间:2023-11-24 23:45:14

svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等

<g>元素

如果我们仅仅用于学习svg的时候可能不太会用到<g>元素,但当我们绘制特别复杂的图形的时候<g>元素可配上大用场。<g>元素的作用就是将其子元素作为一个组合,以备将来的复用。可以通过为<g>元素添加<title>子元素来为组合添加标题,详细的描述可以放在<desc>子元素中。例如:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<g id="basic">
<title>一条线段</title>
<desc>这是一条线段,起点坐标(23,30),终点坐标(209,78)</desc>
<line x1="23" y1="30" x2="209" y2="78" stroke="#000"></line>
</g>
</svg>
</body>
</html>

<g>元素的作用在于复用,且看下面的<use>元素

<use>元素

以上介绍的<g>元素可将元素进行分组,<use>元素的作用就是复用这些分组元素,use的使用格式如下:

<use xlink:href="#use-element-id" x="translate-x" y="translate-y"></use>

xlink:href属性指定了引用元素的id,x属性指定了相对于原来的元素水平平移的距离,y元素指定了相对于原来的元素垂直平移的距离

示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<g id="basic">
<title>一条线段</title>
<desc>这是一条线段,起点坐标(23,30),终点坐标(209,78)</desc>
<line x1="10" y1="0" x2="10" y2="100" stroke="#000"></line>
</g>
<use xlink:href="#basic" x="10" y="0"></use>
</svg>
</body>
</html>

打开效果如下:

4. svg学习笔记-文档结构元素和样式的使用

将<use>元素的y改为10,效果如下:

4. svg学习笔记-文档结构元素和样式的使用

<defs>元素

<defs>元素的作用和<g>元素的作用类似,都是复用元素,但是<defs>元素块相当于声明了一个模板区域,这个元素块中的子元素一律不会显示,而是作为模板,以备文档中其他部分的引用,SVG规范推荐我们将所有的想要复用的对象放在<defs>模块中,这样SVG阅读器可以更高效的处理数据。

示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<defs>
<g id="basic-line">
<title>一条线段</title>
<desc>这是一条线段,起点坐标(23,30),终点坐标(209,78)</desc>
<line x1="10" y1="0" x2="10" y2="100" stroke="#000"></line>
</g>
<g id="basic-circle">
<circle cx="30" cy="40" r="50" stroke="black" fill="none">
</g>
</defs> <use xlink:href="#basic-line" x="10" y="10"></use>
<use xlink:href="#basic-circle" x="70" y="50"></use>
</svg>
</body>
</html>

呈现如下:

4. svg学习笔记-文档结构元素和样式的使用

<symbol>元素

<symbol>元素的作用和<g>元素的作用类似,都是用来组合元素,而不同的是<symbol>元素内的子元素不会显示,但依然建议将<symbol>元素放在<defs>元素内,以维护代码的简洁性,<symbol>元素与<g>元素还有一个不同,就是<symbol>元素可以指定viewbox属性和preserveAspectRatio属性,示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<defs>
<g id="basic-line">
<title>一条线段</title>
<desc>这是一条线段,起点坐标(23,30),终点坐标(209,78)</desc>
<line x1="10" y1="0" x2="10" y2="100" stroke="#000"></line>
</g>
<g id="basic-circle">
<circle cx="30" cy="40" r="50" stroke="black" fill="none">
</g>
<symbol id="basic-polygon">
<polygon points="22.4,34 10,67 90,2"></polygon>
</symbol>
</defs> <use xlink:href="#basic-line" x="10" y="10"></use>
<use xlink:href="#basic-circle" x="70" y="50"></use>
<use xlink:href="#basic-polygon" x="200" y="50"></use>
</svg>
</body>
</html>

效果如下:

4. svg学习笔记-文档结构元素和样式的使用

<image>元素

<image>元素可以引用其它图像显示在svg中,引用的图像可以是JPEG,PNG和SVG格式,使用格式如下:

<image xlink:href="picture-path" x=" left-top-point-x" y="left-top-point-y" width="w" height="h"></image>

xlink:href属性指定了需要引用图片的路径,x和y分别是引用图片的左上角顶点坐标,但非必需,若不声明,则默认以坐标原点为图片的左上角,width和height为引用图片的宽和高,

示例如下:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<image xlink:href="background.jpg" x="90" y="80" width="200" height="150"></image>
</svg>
</body>
</html>

4. svg学习笔记-文档结构元素和样式的使用

SVG样式的使用方式

主要有内联样式,内部样式表,引用样式表3种方式,和css的使用方式一样。

内联样式就是直接在元素上添加style属性或者直接使用对应的属性,例如:

<svg width="300" height="300" style="border:1px solid #000000">
<line x1="10" y1="10" x2="200" y2="200" stroke="black">
</line>
</svg>

其中<svg>元素使用了style的方式来添加样式,而<line>元素直接使用样式属性添加样式,这种方式就是内联样式

内部样式表就是在文件中直接声明style代码块专门用于给元素添加样式,例如:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg>
<defs>
<style type="text/css">
svg{
width:300px;
height:300px;
border:1px solid #000;
}
polygon{
stroke: black;
fill:none;
}
</style>
</defs>
<polygon points="10,10 10,210 190,150"></polygon>
</svg>
</body>
</html>

若在网页中使用svg,则可将上述代码的style代码块移到<head>标签内

引用样式表就是将样式表独立出来存成一个文件,然后在要使用该样式表的文件中引用,例如:

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<link rel="stylesheet" type="text/css" href="svg-21.css">
</head>
<body>
<svg>
<ellipse cx="150" cy="150" rx="50" ry="10"></ellipse>
</svg>
</body>
</html>

效果如下:

4. svg学习笔记-文档结构元素和样式的使用