在下一个示例中，我使用了defs中的元素之前，定义了如何去展现图元。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 1000 1000" version = "1.1">
    <defs>
        <!-- A circle of radius 200 -->
        <circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
        <!-- An ellipse (rx=200,ry=150) -->
        <ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
    </defs>
    <use x = "100" y = "100" xlink:href = "#s1"/>
    <use x = "100" y = "650" xlink:href = "#s2"/>
</svg>

请注意以下代码

<circle id="s1"...

这行代码定义了一个圆，并且设置了他的id属为s1.  在后面的代码中， 可以使用这个ID来引用原来定义好的圆。 使用use标签，并在标签中设置"xlink:href"属性（XLINK：HREF =“＃S1线”）。 请注意: “use”标签中还设置了x和y的属性， 这两个属性会设置到被添加到的原始定义中（即，在例子中，圆的cx和cy）。

SVG中的'defs' and 'use'-可复用的图元定义的更多相关文章

  1. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  2. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

  3. 使用SVG中的Symbol元素制作Icon【摘转】

    以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势 随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...

  4. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  5. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  6. 在svg中的line和path根据路径返回x,y

    由于path有自带的api可获得总长度,和某个长度返回的坐标. var total = d.path.getTotalLength();//返回总长度 var point = d.path.getPo ...

  7. 在 SVG 中添加交互性

    原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgint/ SVG 中的交互性可以分为三个领域 -- 链接.事件和脚本.本文将依次讨论这三个领域. ...

  8. 动态插入图片到 svg 中

    动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...

  9. Snap.svg中transform旋转值的“r+数组”表现形式

    Snap.svg中transform的值还可以写为类似以下这种形式: transform:'r'+[100,[50,50]]; 这种写法的意思是,让元素以(50,50)为旋转中心点,然后旋转100度. ...

随机推荐

  1. hdu 2028

    PS:以前对long long型的数据就一直不怎么明白...弄了好久... long long a; scanf("%lld",&a); printf("%lld ...

  2. React Native之生命周期

    React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分). 如图: 下面简单讲解一下三大阶段中各自的函数: 实例化阶段: 在日常 ...

  3. 14、C#基础整理（函数）

    函数 1.概念:是一个带有输入参数.输出参数.返回值的代码块. 2.写法: 修饰符  返回值类型  函数名(输入参数,输入参数) { 方法段 return 返回值; } 3.注释: (1)输入参数格式 ...

  4. EnterpriseLibrary4 自己封装程序集实现log打印

      注意:1)要引用响应的程序集,必须是41的          2)配置文件 using Microsoft.Practices.EnterpriseLibrary.Common.Configura ...

  5. 超链接访问过后hover样式就不出现的问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. 学习进度条<第一周>

    所花时间(包括上课):8小时(上课4,编程0.5,写博客1,读书2.5) 代码量:90行 博客量:4篇 了解到的知识点:什么是BUG                 哪怕有几万分之一的概率也要考虑安全 ...

  7. 用NSOperation和NSOperationQueue实现多线程编程

    1.上一讲简单介绍了NSThread的使用,虽然也可以实现多线程编程,但是需要我们去管理线程的生命周期,还要考虑线程同步.加锁问题,造成一些性能上的开销.我们也可以配合使用NSOperation和NS ...

  8. c++11编码规范 NULL还是nullptr

    0和nullptr/NULL 至于指针(地址值),根据实际选择用0.NULL还是nullptr.对使用了C++11特性的项目,选用nullptr:对于C++03项目,推荐NULL,因为它像是一个指针

  9. VMDK镜像迁移到KVM（二）

    KVM has the ability to use VMware's .vmdk disk files directly, as long as the disk is wholly contain ...

  10. 多进程和atexit清理函数

    前言: 最近帮朋友review其模块服务代码, 使用的是python的twisted网络框架. 鉴于之前并没有使用过, 于是决定好好研究一番. 不过这个问题, 和twisted网络框架本身没有关系, ...