svg在html5中应用,css引用svg

　　之前已经介绍了很多图形元素。如果很多图形都是一样的，是不是每次都需要定义一个新的？可以分享一些图形吗？这是本节的重点-SVG元素的重用。组合-g元素

　　g元素是一个容器，将一组相关的图形元素组合成一个整体；这样，我们就可以对这个整体进行操作。该元素通常可以与desc和标题元素结合使用，以提供文档的结构信息。一个结构良好的文档通常具有良好的可读性和渲染效率。看一个小例子：复制代码如下：

　　SVG xmlns= http://www . w3 . org/2000/SVG

　　版本=1.1 宽度= 5厘米高度= 5厘米

　　描述两个组，每个oftworrectangles/desc

　　gid=group1fill=red

　　rectx=1cmy=1cm 宽度=1cm 高度=1cm/

　　rectx= 3厘米 y= 1厘米宽= 1厘米高= 1厘米/

　　gid=group2fill=blue

　　rectx=1cmy=3cm 宽度=1cm 高度=1cm/

　　rectx= 3厘米 y= 3厘米宽= 1厘米高= 1厘米/

　　！-Showoutlineofcanvasusing“rect”元素-

　　rectx= .01cm厘米 y= .01cm厘米宽度= 4.98厘米高度= 4.98厘米

　　fill= none stroke= blue stroke-width= 02cm /

　　/svg注意几点:

　　1.XMLNS= 3358 www.w3.org/2000/svg表示整个svg元素的默认名称空间是SVG。当没有歧义时，这可以省略。由于svg文档是XML文档，所以这里适用XML命名空间的相关规则。例如，可以为svg显示指定一个名称空间，为名称空间提供别名，等等。

　　2.g元素可以嵌套。

　　3.像单个元素一样，组合的图形元素可以被赋予一个id值。这样，在需要的时候(比如动画和重用一组元素)，就可以只引用这个id值。

　　4.组合一组图形元素可以设置相关属性(填充、描边、变换等。)这一组元素的统一方式，这也是一个使用组合的场景。模板-symbol元素

　　symbol元素用于定义一个图形模板(一个模板可以包含很多图形)，可以通过use元素实例化。模板的功能和G元素类似，提供一组图形对象，但也有一些区别。与G元素的区别在于：

　　1.不会呈现符号元素本身，只会呈现符号模板的实例。

　　2 .符号元素可以有viewBox和preserveAspectRatio属性，这些属性允许符号缩放图形元素。

　　从渲染的角度来看，类似于符号元素的元素有标记(定义箭头和标签)和图案(定义颜色)元素；这些元素不会直接呈现；它们的用法基本上是由use元素实例化的。正是由于这个原因，“显示”属性对symbol没有意义。

　　以下修改后的代码显示了如何使用symbol:按如下方式复制代码：

　　SVG xmlns= http://www . w3 . org/2000/SVG

　　xmlns:xlink= http://www . w3 . org/1999/xlink

　　版本=1.1 宽度= 5厘米高度= 5厘米

　　描述两个组，每个oftworrectangles/desc

　　symbolid=group1fill=red

　　rectx=1cmy=1cm 宽度=1cm 高度=1cm/

　　rectx= 3厘米 y= 1厘米宽= 1厘米高= 1厘米/

　　/符号

　　gid=group2fill=blue

　　rectx=1cmy=3cm 宽度=1cm 高度=1cm/

　　rectx= 3厘米 y= 3厘米宽= 1厘米高= 1厘米/

　　usex link:href= # group 1 target= _ blank rel= no follow

　　！-Showoutlineofcanvasusing“rect”元素-

　　rectx= .02cm厘米 y= .02cm厘米宽度= 4.96厘米高度= 4.96厘米

　　fill= none stroke= blue stroke-width= 02cm /

　　/svg定义-defs元素

　　SVG允许您定义一组对象，然后重用这组对象(注意，不仅仅是图形对象)。最常见的例子是定义渐变颜色，然后将其分配给其他图形对象中的fill属性。渐变在定义的时候是不渲染的，所以这种类型的对象可以放在任何地方。图形对象的重用是经常存在的，我们在定义的时候不想直接渲染，而是想在引用的地方渲染。这可以通过defs元素来实现。

　　通常，建议尽可能将被引用的对象放在defs元素中。这些对象通常是：Altglyphdef、Clippath、光标、滤镜、标记、遮罩、图案、线性渐变、径向渐变、符号和图形对象。在defs元素中定义这些对象很容易理解，因此提高了可访问性。

　　实际上，作为容器对象，G元素、symbol元素和defs元素都不同程度地提供了重用的功能，只是每个元素的特性可能略有不同：比如直接渲染G元素，不直接渲染symbol和defs，symbol包含viewBox属性，会新建一个窗口。

　　通常，defs中定义的元素被赋予id属性，并在需要它们的地方直接使用。根据元素的不同，这些定义可以用在不同的地方。例如，以下渐进颜色用作属性：复制代码代码如下：

　　SVG width= 8厘米高度= 3厘米

　　xmlns= http://www . w3 . org/2000/SVG version= 1.1

　　descllocaurireferenceswithinancestor defs 元素。/desc

　　面数

　　linearGradientid=Gradient01

　　stop offset= 20% stop-color= # 39F /

　　stop offset= 90% stop-color= # F3F /

　　/线性梯度

　　/defs

　　rectx= 1厘米 y= 1厘米宽= 6厘米高= 1厘米

　　fill=url(#Gradient01)/

　　/svg

　　相关图形元素的定义可以通过使用元素链接到文档。例如，复制代码如下：

　　SVG width= 10cm height= 3cm view box= 0010030 version= 1.1

　　xmlns= http://www . w3 . org/2000/SVG xmlns:xlink= http://www . w3 . org/1999/xlink

　　desc example Use 01-在“rect”/desc上“use”的简单情况

　　面数

　　rect id= my rect width= 60 height= 10 /

　　/defs

　　rectx=" . 1 " y=" . 1 "宽度=99.8 高度=29.8

　　fill= none stroke= blue stroke-width= 2 /

　　usex= 20 y= 10 xlink:href= # my rect /

　　/svg

　　这里请注意xlink名称空间的使用。尽管大多数查看器在没有它的情况下也能正确显示这个项目，但是为了一致性，应该在svg/svg元素上定义xlink名称空间。引用-use元素

　　本质上，任何svg、符号、g、单个图形元素和use元素都可以被use元素作为模板对象引用(例如初始化)。引用的图形内容将在指定位置呈现。与image元素不同，use元素不能引用整个文档。

　　use元素还有x，y，width和height属性，可以省略。如果不省略，引用的图形内容坐标或长度将被映射到当前用户坐标空间。

　　use元素的动作过程相当于将被引用的对象做了一个深度拷贝到一棵独立的非公有DOM树中；该树的父节点是use元素。虽然是一个非公共的DOM节点，但本质上是一个DOM节点，所以被引用对象的所有属性值、动画、事件、CSS设置都会被复制，仍然起作用，这些节点会继承use元素和use祖先的相关属性(注意，被引用的元素是深度副本，这些复制的元素与原元素无关。因此，这里不会继承被引用元素的祖先节点的属性)。如果这些节点本身有相关的(CSS)属性，它们也会覆盖继承的属性。这些与普通的DOM节点一致，所以在对use元素使用“visibility:hidden”时要小心，这不一定有效。但是因为这些节点不是公共的，所以在DOM操作中只能看到use元素，所以只能操作到use元素。

　　从视觉效果上看，use元素更像是占位符，渲染后的视觉效果和直接用引用对象渲染是一样的：1.use元素引用一个symbol元素。

　　在这种情况下，视觉效果相当于：

　　(1)用g元素替换use元素；

　　(2)将除x，y，width，height，xlink:href之外的所有使用属性移到G元素中；

　　(3)将use的x，y属性改为translate(x，y)并添加到G元素的transform属性的最后；

　　(4)将引用的符号元素替换为svg元素，SVG元素会显式使用use元素的宽度和高度属性(use元素100%没有这些属性)；

　　(5)将引用的符号元素的图形内容深度复制到替换svg中。2.use元素引用一个svg元素

　　在这种情况下，视觉效果相当于：

　　(1)用g元素替换use元素；

　　(2)将除x，y，width，height，xlink:href之外的所有使用属性移到G元素中；

　　(3)把使用的x，y属性变成平移(x，y)，追加到g元素的改变属性最后；

　　(4)把引用的挽救(保存的简写)元素包括内容拷贝过来，这个挽救(保存的简写)元素会显式使用使用元素的宽度和高度属性（使用元素没有这些属性则使用原来的值);3.其他情况

　　这些情况下的视觉效果就相当于：

　　(1)把使用元素换成g元素；

　　(2)把使用的除x，y，宽度，高度，xlink:href外的属性全部移到g元素；

　　(3)把使用的x，y属性变成平移(x，y)，追加到g元素的改变属性最后；

　　(4)把引用元素拷贝过来；看下面例子的视觉效果: 复制代码代码如下：

　　SVG宽度= 10厘米高度= 3厘米视图框= 0010030 版本= 1.1

　　xmlns= http://www。w3。org/2000/SVG xmlns:xlink= http://www。w3。 org/1999/xlink

　　描述示例使用03-“使用”带有“转换”属性/desc

　　面数

　　rect id= my rect x= 0 y= 0 width= 60 height= 10 /

　　/defs

　　rectx="。1 " y="。1 "宽度=99.8 高度=29.8

　　fill= none stroke= blue stroke-width= 2 /

　　usexlink:href=#MyRect

　　transform=translate(20，2.5)rotate(10)/

　　/svg下面的图和上面的图外观是一样的:复制代码代码如下：

　　SVG宽度= 10厘米高度= 3厘米视图框= 0010030

　　xmlns= http://www。w3。“org/2000/SVG”版本=“1.1”

　　描述示例使用03-“使用”带有“转换”属性/desc

　　rectx="。1 " y="。1 "宽度=99.8 高度=29.8

　　fill= none stroke= blue stroke-width= 2 /

　　gtransform=translate(20，2.5)rotate(10)

　　rectx= 0 y= 0 width= 60 height= 10 /

　　/svg实用参考：脚本索引：http://msdn。微软。com/zh-cn/library/ff 971910(v=vs . 85).文件

　　开发中心：https://开发者。Mozilla。组织/环境/服务

　　热门参考：http://www.chinasvg.com/

　　官方文档：http://www.w3.org/TR/SVG11/

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读