Svg学这些就够了-组合复用（一）

        SVG 意为可缩放矢量图形（Scalable Vector Graphics），是一种图像文件格式。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。基本的介绍就不多说了，如果不清楚的读者可以去百度一下，这里有个简单的入门教程 SVG 教程-菜鸟网络https://www.runoob.com/svg/svg-tutorial.html。

 

       我们在做设计中，经常想到的就是复用，这也是软件的魅力，一次设计，无限复制和使用，Svg也支持这样的复用。我们前期可以设计一些基本的图形图案，在后续的设计中，重用这些基本图案，俗称的造轮子。下面来简单的介绍一下，先来看一张图片，这就是我们的轮子。

它的svg源文件如下：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="100" height="100" fill="#00CC66" stroke="black" stroke-width="2"/>
    <circle cx="50" cy="50" r="40" fill="white" stroke="black" stroke-width="2"/>
    <polygon points="80,50 50,20 20,50 50,80" fill="#FF00FF"/>
    <text fill="white" font-size="40" text-anchor="middle" x="50" y="50" dx="0" dy="0.35em">0</text>
</svg>

熟悉svg语法的读者很容易看懂，这个图案有4个部分组成：

1.最外围的是一个矩形，填充的是绿色

<rect width="100" height="100" fill="#00CC66" stroke="black" stroke-width="2"/>

2.接着是一个圆形

<circle cx="50" cy="50" r="40" fill="white" stroke="black" stroke-width="2"/>

3.接着是一个多边形

<polygon points="80,50 50,20 20,50 50,80" fill="#FF00FF"/>

4.最里面是文本内容

<text fill="white" font-size="40" text-anchor="middle" x="50" y="50" dx="0" dy="0.35em">0</text>

       这么个基础图案是比较简单的，但也有4行svg代码，如果要在一个复杂点的图片中显示多个这样的图案是不是要复制粘贴呢，当然也可以，不过这样就很傻了，后面如果要修改基础图案的某个部分，就满世界的改了，能不能有像对象编程中那样，定义一个类，需要的时候就new出来，答案是有的，svg也有类似的功能，成为组合，把这个基础图案定义为一个组合，后面就可以尽情的复用了。

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <g id="node">
            <rect width="100" height="100" fill="#00CC66" stroke-width="2" stroke="black"/>
            <circle cx="50" cy="50" r="40" fill="white" stroke-width="2" stroke="black"/>
            <polygon points="80,50 50,20 20,50 50,80" fill="#FF00FF"/>
            <text fill="white" font-size="40" text-anchor="middle" x="50" y="50" dx="0" dy="0.35em">0</text>
        </g>
    </defs>

    <use xlink:href="#node" x="0" y="0"></use>
    <use xlink:href="#node" x="100" y="100"></use>
    <use xlink:href="#node" x="200" y="200"></use>

</svg>

       将基础图案的内容放到g标签中，SVG中的<g></g>标签用来组织其他SVG元素的，在给g标签设置一个id，这里设置为node，然后将整个g标签的内容放到defs标签中。<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。使用<symbol>元素也可以，不过本文不讨论，只取defs元素。

定义了可复用的组合元素后，使用use来引用，如：

<use xlink:href="#node" x="0" y="0"></use>

表示将node基础图案放在画布的（0,0）位置上，本示例的画布大小为300*300，基础图案的大小为100*100，正好凑成九宫格，效果如下：

          

一个是在浏览器中预览的截图，一个是在pycharm上的预览截图（真正的背景是透明的）。

调换引用和位置如下，效果见下面：

svg源码如下：  

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <g id="node">
        <rect width="100" height="100" fill="#00CC66" stroke-width="2" stroke="black"/>
        <circle cx="50" cy="50" r="40" fill="white" stroke-width="2" stroke="black"/>
        <polygon points="80,50 50,20 20,50 50,80" fill="#FF00FF"/>
        <text fill="white" font-size="40" text-anchor="middle" x="50" y="50" dx="0" dy="0.35em">0</text>
    </g>

</defs>

    <use xlink:href="#node" x="0" y="0"></use>
    <use xlink:href="#node" x="100" y="100"></use>
    <use xlink:href="#node" x="200" y="200"></use>
    <use xlink:href="#node" x="200" y="0"></use>
    <use xlink:href="#node" x="0" y="200"></use>

</svg>

这样的组合复用有什么用的，可以设计一些基础图案，后面通过自由组合生成很多好看有用的图片，效果还是不过的，再欣赏一张码农砌墙的图。

以上涉及的svg源码都已打包奉上，感兴趣的小伙伴可以去下载试试，默认情况下，windows下没有预览svg的功能，下载后，需将svg文件拖拽到浏览器中就预览。

demo源码：svg_demo.zip