×

SVG基础 | SVG defs元素、symbol元素和use元素

作者:Web前端之家2016.09.12来源:Web前端之家浏览:8111评论:0
关键词:html5SVG
微信公众号

微信公众号

SVG的<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组,并用<defs>元素来定义它,然后你就可以在SVG图像中将它当做简单图形来重复使用。看下面的例子:

600.png

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
      <g>
          <rect x="100" y="100" width="100" height="100" />
          <circle cx="100" cy="100" r="100" />
      </g>
  </defs>
</svg>

<defs>元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用<use>元素来引入它们。如下面的代码所示:

<svg xmlns="http://www.w3.org/2000/svg">  
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" /> 
</svg>

要引用<g>元素,必须在<g>元素上设置一个ID,通过ID来引用它。<use>元素通过xlink:href属性来引入<g>元素。注意在ID前面要添加一个#

<use>元素中,通过xy属性来指定重用图形的显示位置。注意在<g>元素中的图形的定位点都是0,0,在使用<use>元素来引用它的时候,它的定位点被转换为<use>元素xy属性指定的位置。

下面是上面代码的返回结果:

上面SVG图像中绿色的圆点并不是示例代码的一部分。它们是用来显示2个<use>元素的xy坐标的。

哪些元素可以被定义为defs中的元素呢?

你可以将下面的元素放入到<defs>元素中使用:

  • 任何图形元素,如:rectline

  • g

  • symbol

SVG symbol元素

SVG <symbol>元素用于定义可重复使用的符号。嵌入在<symbol>元素中的图形是不会被直接显示的,除非你使用<use>元素来引用它。

下面是一个使用<symbol>元素的简单例子:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">
    <symbol id="shape2">
        <circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/>
    </symbol>

    <use xlink:href="#shape2" x="50" y="25" />
</svg>

<symbol>元素需要一个ID号,以便以被<use>元素引用。

一个<symbol>元素可以有preserveAspectRatioviewBox属性。而<g>元素不能拥有这些属性。因此相比于在<defs>元素中使用<g>的方式来复用图形,使用<symbol>元素也许是一个更好的选择。

SVG use元素

SVG <use>元素可以在SVG图像中多次重用一个预定义的SVG图形,包括<g>元素和<symbol>元素。被重用的图形可以在定义<defs>的内部(图形将不可见直到使用use来引用它)或外部。

下面是一个使用<use>元素的例子:

<svg>
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />

</svg>

上面的例子显示的是在<defs>元素中定义的<g>元素。

要引用<g>元素,必须给它一个ID号,通过ID号来引用它。

下面是上面代码的返回结果:

我们也可以引用不在<defs>元素中的图形。<use>元素可以引用SCG图像中的任何元素,只要这个元素有一个唯一的ID号,例如:

<svg width="500" height="110">

    <g id="shape2">
        <rect x="0" y="0" width="50" height="50" />
    </g>

    <use xlink:href="#shape2" x="200" y="50" />

</svg>

 

这个例子在<g>元素中定义了一个<rect>元素。然后通过<use>元素来引用这个<g>元素。它返回的结果如下面所示:

注意这里原始图形和复用的图形都会被显示。因为原始的图形并没有定义在<defs><symbol>元素中。所以它是可见的。

你可以为引用的图形设置CSS样式。你可以在<use>元素中使用style属性来为复用的图形设置它的样式。例如:

<svg width="500" height="110">

  <g id="shape3">
      <rect x="0" y="0" width="50" height="50" />
  </g>

  <use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/>
  <use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/>

</svg>

 

注意上面的代码中,原始的图形并没有设置样式,它将是默认的样式(黑色)。

返回SVG教程目录

相关阅读:

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1473609600700.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

  • Web前端之家

    请持续关注Web前端之家。...

  • Y4K

    谢谢指导,这下背景问题解决了!...

  • Web前端之家

    要用起来才可以....

  • 钢板

    只有持续的学习和应用才能把知识牢固起来www.jinanxingya.com...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria