SVG基础|SVG DEFS元素、SYMBOL元素和USE元素
Release: 2016-05-17 09:07:37
Original
2060 people have browsed it
SVG DEFS元素
SVG的元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组,并用元素来定义它,然后你就可以在SVG图像中将它当做简单图形来重复使用。看下面的例子:
在元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用
要引用元素,必须在元素上设置一个ID,通过ID来引用它。
在
下面是上面代码的返回结果:
上面SVG图像中绿色的圆点并不是示例代码的一部分。它们是用来显示2个元素的x和y坐标的。
哪些元素可以被定义为defs中的元素呢?
你可以将下面的元素放入到元素中使用:
- 任何图形元素,如:rect,line等
- g
-
symbol
SVG SYMBOL元素
SVG 元素用于定义可重复使用的符号。嵌入在元素中的图形是不会被直接显示的,除非你使用元素来引用它。
下面是一个使用元素的简单例子:
元素需要一个ID号,以便以被元素引用。
一个元素可以有preserveAspectRatio和viewBox属性。而元素不能拥有这些属性。因此相比于在元素中使用的方式来复用图形,使用元素也许是一个更好的选择。
SVG USE元素
SVG 元素可以在SVG图像中多次重用一个预定义的SVG图形,包括元素和元素。被重用的图形可以在定义的内部(图形将不可见直到使用use来引用它)或外部。
下面是一个使用元素的例子:
上面的例子显示的是在元素中定义的元素。
要引用元素,必须给它一个ID号,通过ID号来引用它。
下面是上面代码的返回结果:
我们也可以引用不在元素中的图形。元素可以引用SCG图像中的任何元素,只要这个元素有一个唯一的ID号,例如:
这个例子在元素中定义了一个元素。然后通过元素来引用这个元素。它返回的结果如下面所示:
注意这里原始图形和复用的图形都会被显示。因为原始的图形并没有定义在或元素中。所以它是可见的。
你可以为引用的图形设置CSS样式。你可以在元素中使用style属性来为复用的图形设置它的样式。例如:
注意上面的代码中,原始的图形并没有设置样式,它将是默认的样式(黑色)。
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/ziliaoku/ ... g/201506132029.html
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31