SVG defs元素

摘自：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506132029.html

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

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

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

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

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

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

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

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

任何图形元素，如：rect，line等
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>元素可以有preserveAspectRatio和viewBox属性。而<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教程目录

SVG defs元素相关推荐

SVG常用元素标签列表
第一次系统化学习svg,整理了一些常用的SVG元素标签(没有整理滤镜相关)仅供参考学习. defs:用于定义所有可能再次引用的图形元素.在defs元素中定义的图形元素不会直接呈现.你可以在你的视口的任 ...
svg defs 进行定义引用
svg defs 进行定义引用: <%@ page language="java" contentType="text/html; charset=UTF-8&q ...
svg 内部元素scale 缩放不在原位置解决办法
svg 内部元素放大或者缩小默认是通过svg画布 x0 , y0 进行缩放的,即元素的x,y 会变大或者变小,导致元素不在缩放之前的位置解决办法就是,在缩放之前先设置元素的坐标为x0,y0 然后进行 ...
svg常用元素和属性
1. 介绍 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics).其可以直接被插入到网页 DOM 中,甚至作为CSS背景属性等,且无论放大 ...
java svg image xlink_SVG基础 | SVG image 元素
SVG 元素用于在SVG图像中嵌入位图.通过使用元素你可以将一张位图绘制在SVG图像上面. 下面是一个简单的例子: xlink:href="http://img.htmleaf.com/15 ...
svg中元素的层级关系
svg,许多css属性并不适用与svg,其中就包含z-index: svg中的元素只会按照生成顺序层叠,后来者居上.可以使用回调强加顺序,来实现对于顺序的控制. 第二段代码在第一段之后执行,直接按照顺 ...
svg标签元素的XPATH定位
项目中会遇到svg标签的元素,这时如果想要用XPATH定位元素,用一般元素的XPATH写法是定位不到的. 尝试了诸如://svg[@id='iconadd-people'].//use[@xlink: ...
编写 SVG 的指南
简介 Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言.这些图形由路径,图片和(或)文本组成,并能够在不失真的情况下任意变换尺寸. 本书主要介绍了内联SVG, ...
【27前端】base标签带有href属性会让chrome里的svg元素url失效
一个chrome的问题,但具体原因不明. 触发条件:chrome浏览器base标签里href属性有值的时候触发问题:svg里面的元素如果有用url的滤镜和模糊,则会失效,在firefox里和IE10 ...
前端切图之svg图标的复用基于defs和use 亲测有用
切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...

SVG defs元素

SVG symbol元素

SVG use元素

返回SVG教程目录

SVG defs元素相关推荐

最新文章

热门文章