转自:http://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

未来必热:SVG Sprite技术介绍

一、Sprite技术

这里所说的Sprite技术,没错,类似于CSS中的Sprite技术。图标图形整合在一起,实际呈现的时候准确显示特定图标。

二、SVG Sprite与symbol元素

目前,SVG Sprite最佳实践是使用symbol元素。symbol元素是什么呢?单纯翻译的话,是“符号”的意思。然,这个释义并不符合这里的场景。不知大家有没有用过Flash,symbol实际上就类似于Flash中的“影片剪辑”、或者“元件”。

因此,我个人觉得,symbol应该解释为“元件”最为恰当!

那,symbol和SVG Sprite又有什么关系呢?

我们可以把SVG元素看成一个舞台,而symbol则是舞台上一个一个组装好的元件,这这些一个一个的元件就是我们即将使用的一个一个SVG图标。

于是,对于一个集合了三个SVG图标的SVG元素的代码结构会是这样:

<svg>
<symbol>
<!-- 第1个图标路径形状之类代码 -->
</symbol>
<symbol>
<!-- 第2个图标路径形状之类代码 -->
</symbol>
<symbol>
<!-- 第3个图标路径形状之类代码 -->
</symbol>
</svg>

每一个symbol就是一个图标元件,但是,只有上面的代码,是无法呈现类似下面的效果的:

为何?

因为,舞台上只是放置了图标,如果你不使用(use),是看不见的。就好比你女朋友买了几箱的衣服放家里,如果不穿出去,谁知道她这么土豪呢?

因此,还差一个“使用”,也就是SVG中的<use>元素。

三、SVG中的use元素

use元素是SVG中非常强大,非常重要的一个元素,尤其在Web开发中,为何?

两点:

  1. 可重复调用;
  2. 跨SVG调用;

1. 可重复调用
你好不容易,用了几十个坐标值,好不容易绘制了一个图形,如果你想再弄一个同样造型,但位置不同的图形出来,你会怎么办?——再复制一遍代码?别说笑了,(如果真那样)SVG文件的尺寸赶得上二师兄的腰围了。

<svg>
<defs>
<g id="shape">
<rect x="" y="" width="" height="" />
<circle cx="" cy="" r="" />
</g>
</defs> <use xlink:href="#shape" x="" y="" />
<use xlink:href="#shape" x="" y="" />
</svg>

结果是(IE9+浏览器可见):

首先,注意到没有,use元素是通过xlink:href属性,寻找要使用的元素的。#shape对应的就是idshape的元素。use元素可以有自己的坐标,以及支持transform变换,甚至可以use其他use元素。

这里,两个use元素使用的是同一个g元素(组合),从而实现了图形的重复调用功能。

2. 跨SVG调用
SVG中的use元素可以调用其他SVG文件的元素,只要在一个文档中。

<svg width="" height=""><use xlink:href="#shape" x="" y="" /></svg>

结果仍是那个图形:

而这个跨SVG调用就是“SVG Sprite技术”的核心所在。

试想下,我们只要在页面某处载入一个充满Sprite(symbol)的SVG文件(或直接include SVG代码),于是,在页面的任何角落,只要想使用这个图标,只要简单这一点代码就可以了:

<svg class="size"><use xlink:href="#target" /></svg>

图标尺寸CSS控制,里面只有一个仅有xlink:href属性的use元素,Done! 完成!

也即是说,在HTML层面,图标使用的代码成本,跟传统的CSS Sprite或者流行的font-face几乎无异,代码简洁,而且很好维护。所有的SVG图标都在一个SVG源上。retina良好,尺寸可任意拉伸,且颜色可控,真乃Web图标的未来之星。

http://tutorials.jenkov.com/svg/use-element.html

The SVG <use> element can reuse an SVG shape from elsewhere in the SVG document, including <g> elements and <symbol> elements. The reused shape can be defined inside the <defs>element (which makes the shape invisible until used) or outside.

A use Example

Here is a simple example of the <use> element:

<svg>
<defs>
<g id="shape">
<rect x="" y="" width="" height="" />
<circle cx="" cy="" r="" />
</g>
</defs> <use xlink:href="#shape" x="" y="" />
<use xlink:href="#shape" x="" y="" /> </svg>

This example shows a <g> element defined inside a <defs> element. This makes the <g> invisible unless referenced by a <use> element.

Before the <g> element can be referenced, it must have an ID set on it via its id attribute. The <use> element references the <g> element via its xlink:href attribute. Notice the # in front of the ID in the attribute value.

The <use> element specifies where to show the reused shapes via its x and y attributes. Notice that the shapes inside the <g> element are located at 0,0. That is done because their position is added to the position specified in the <use> element.

Here is the resulting image:

The blue dots are not part of the example. They are added to show the x and y of the two <use>elements.

<svg width="" height="">

    <g id="shape2">
<rect x="" y="" width="" height="" />
</g> <use xlink:href="#shape2" x="" y="" /> </svg>

Using Shapes Outside of a defs Element

The <use> element can reuse elements from anywhere in an SVG image as long as that shape has an id attribute with a unique value. Here is an example:

This example defines a <g> element with a <rect> element inside. Then it reuses the <g> element (including the nested <rect> element) via a <use> element.

Here is the resulting image:

Notice that both the original shape and its reused version are shown. That is happening because the shape that is reused (the <g> element) is not defined inside the <defs> element or <symbol>element. Therefore it is visible.

Again, the blue dot shows the coordinates of the <use> element.

<svg width="" height="">

  <g id="shape3">
<rect x="" y="" width="" height="" />
</g> <use xlink:href="#shape3" x="" y="" style="fill: #00ff00;"/>
<use xlink:href="#shape3" x="" y="" style="stroke: #00ff00; fill: none;"/> </svg>

Setting CSS Styles

You can set the CSS styles when reusing a shape, if the original shape has no CSS style set on it. You simply specify the styles to set inside the style attribute of the <use> element. Here is an example:

Notice how the original shape has no style attribute set on it. It will then be rendered with default styles (typically black).

SVG Use(转)的更多相关文章

  1. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  2. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  3. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  4. SVG:linearGradient渐变在直线上失效的问题解决方案

    SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...

  5. HTML5_05之SVG扩展、地理定位、拖放

    1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg">  方法二:<body><svg></svg>&l ...

  6. HTML5_04之SVG绘图

    1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...

  7. 关于SVG的viewBox

    在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...

  8. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  9. Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

    stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...

  10. Notes:SVG(3)---滤镜和渐变

    SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...

随机推荐

  1. 初窥XSS跨站脚本攻击

    XSS跨站脚本攻击的分类 一. 反射型XSS跨站脚本攻击 二. 存储型XSS跨站脚本攻击 三. 基于DOM的XSS跨站脚本攻击 1.反射性XSS 经过后端,不经过数据库 2.储存型XSS 经过后端,经 ...

  2. php 判断白天黑夜

    <?php $h=date('H'); if($h>=8 && $h<=20) echo '白天'; else echo '夜晚'; ?>

  3. 【BZOJ】3403: [Usaco2009 Open]Cow Line 直线上的牛(模拟)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3404 裸的双端队列.. #include <cstdio> #include <c ...

  4. 【Raspberry Pi】读取DHT11温度湿度波折

    从网上找到了DHT11厂家说明书,尝试用python根据时序图写数据获取驱动,但发现python的高层特性导致在做底层代码时例如控制20us时延这类需求就没什么好的办法. 还是得回到C-wiringP ...

  5. (转)Unity笔记之编辑器(UnityEditor)

    在使用unity3d的过程中,时常会需要从场景中寻找或者调用一个对象,而Unity就提供了一个贴心的功能——拖拽.用鼠标拖一下中比写堆代码直观的多吧!但是Unity提供的远远不止这一丢丢,下面我们来简 ...

  6. 对MathType做个介绍

    MathType是一款专门用来编辑数学公式的公式编辑器,它里面包含有超过1000种的符号与模板,完全能够满足你的使用需要.特别是对于专业人士,非常的方便.下面我们就来给大家介绍介绍. 1.安装过程 与 ...

  7. (1)、hive框架搭建和架构简介

    一.简介 Hive是基于hadoop的一个数据仓库工具,有助于查询和管理分布式存储系统中的数据集,非常适合数据仓库的统计分析 Hive 不适合用于连机事物处理.也不提供实时查询,比较适合在大量不可变数 ...

  8. commit和rollback

    COMMIT过程·已经在 SGA(系统全局区域)中产生了回滚段(Rollback segment)记录.·已经在 SGA 中产生了修改数据块.·已经在 SGA 中产生了上面两条的缓冲重做(redo). ...

  9. 网络虚拟化之FlowVisor:网络虚拟层(中)

    上一篇博客网络虚拟化之FlowVisor:网络虚拟层(上)主要对比了计算机虚拟化和网络虚拟化,引出了FLowVisor网络虚拟层,介绍了其一些特性,这篇博文深入讲解FLowVisor的技术. 一. 概 ...

  10. ajax 传递数组类型参数后台接收不到的问题

    在做排序功能的时候需要将一个数组的数据传递到后台,(当时怎么没用json,如果用json就没有那么多的事情了),数据提交采用ajax! 先看代码 js: submitbtn: function () ...