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

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的使用格式如下：

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>

打开效果如下：

将<use>元素的y改为10，效果如下：

<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>

呈现如下：

<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>

效果如下：

<image>元素

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

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>

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>

效果如下：