SVG在html页面中有两种引用方式：

1. 内联。就是直接将SVG图形写在html的svg标签中，比如：

<html>

  <head></head>

  <body>

    <svg ...>    >

      ...        > 内联式

    </svg>       >

  </body>

</html>

2. 外部引用。就是以img标签，embed标签，object标签或iframe标签引用外部的svg文件，比如：

<html>

  <head></head>

  <body>

    <img src="sample.svg">                 >

    <embed src="sample.svg"></embed>       > 外部引用式

    <iframe src="sample.svg"></iframe>     >

    <object data="sample.svg"></object>    >

  </body>

</html>

对于以img标签形式的外部引用，将不支持脚本访问内部元素，仿佛真的就变成“img”了，因此仅适用于静态使用场景，应用范围比较有限。而其他几种方式都支持脚本访问。

那么问题来了，有这么多种引用方式，究竟哪种比较好呢？

经过这几天对SVG的折腾，我发现：对于静态使用场景，无所谓。对于动态使用场景，推荐内联方式，外部引用方式有不少坑。

内联方式可以满足你的任何需求：

1. 可以直接使用Javascript进行DOM操作（注意，Jquery也可以哦，但有些方法没有效果，因为SVG和HTML的DOM不同）

2. 可以直接使用CSS修饰

换句话说，用内联方式引用的SVG就跟普通HTML标签没什么区别！

唯一的不爽嘛，就是SVG的代码必须硬编码进HTML页面中，看着不爽，灵活性也差。

外部引用就比较悲剧了：

1. 无法直接使用Javascript进行DOM操作。

直接调用getElement系列方法得到的是引用的那个标签而不是SVG内容，比如：

<object id="svg-sample" src="sample.svg"></object>

你用document.getElementById("svg-sample")得到的只是object那个标签，而sample.svg的内容是没有的。为了得到svg的内容，必须还得通过contentDocument属性或getSVGDocument()方法。像这样：

document.getElementById("svg-sample").contentDocument

或是

document.getElementById("svg-sample").getSVGDocument()

（getSVGDocument是个被废弃的方法，不推荐使用）

但是要注意，上面这个方法只对XHTML类型的页面有效，Content-Type得是application/xhtml+xml，否则对于text+html类型的页面还是取不到SVG的内容。因此，在本地调试的时候，还要对服务器进行特殊配置，使其返回正确类型的页面。好蛋疼。只有取到SVG的内容，才能够继续使用Javascript操纵内部元素。

可以参考StackOverflow上这个问题

2. 无法直接用CSS修饰

这个好解决，在SVG内部引入外部CSS即可。但我最开始被这个问题困扰了很久。。一直不知道原因。

SVG成为标准都10多年了，没想到直到今天用起来还这么蛋疼。。

蛋疼的SVG外部引用方式的更多相关文章

  1. svg复用方式<g>, <defs>, <symbol>, <use>

    svg复用元素的方式主要有 <g>, <defs>, <symbol>, <use> 1. <g> group, 分组,定义一组元素,初始不 ...

  2. SVG简介

    最近遇到SVG这个名词,于是查阅资料,做个笔记. 前言 图片的数字化.将图片存储为数据有两种方案. 位图.也被称为光栅图.即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合.每个点发出的光有独 ...

  3. o'Reill的SVG精髓（第二版）学习笔记——第五章

    第五章 文档结构 5.1 结构与表现 XML的目标之一便是提供一种能将结构从视觉表示中独立出来的方法. 但是不幸的是,关于XML的很多讨论都强调结构而非表现. 我们将通过详细讨论如何在SVG中指定表现 ...

  4. 【转】【翻译】对响应式SVG的再思考

    来源: http://www.w3ctech.com/topic/1555 原文地址:http://www.smashingmagazine.com/2014/03/rethinking-respon ...

  5. svg滤镜学习

    SVG滤镜绝对称得上是他最强大的功能之一,在不影响任何文档结构的前提下,允许你给你的矢量图形添加各种专业视觉效果,我个人给他的定义就是,把PS装到了网页上. 一.  SVG滤镜的原理 基本原理描述太多 ...

  6. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  7. svg学习之旅（1）

    Canvas 与 SVG 的比较 下表列出了 canvas 与 SVG 之间的一些不同之处. Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果 ...

  8. 通过SVG与CSS3实现向上图标

    需求 H5活动页需要用的图标很少,暂时没有使用iconfont的必要性,而通过图片的话额外增加UI的工作量以及增加请求数,前端也有很多实现简单图标的方法,所以就尝试自己去解决,写一个"返回顶 ...

  9. SVG初尝试(一)

    SVG简介 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics).其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它 ...

随机推荐

  1. freebsd自动获取ip地址

    最小化安装完成freebsd后,ifconfig查看不到ip地址 修改/etc/rc.conf 添加ifconfig_网卡名称="DHCP" 重启服务器或者sh /etc/rc.c ...

  2. gunzip

    gunzip——解压缩.gz的压缩文件 GNU unzip 命令所在路径:/bin/gunzip 示例1: # gunzip services.gz 解压缩当前目录下的services.gz文件,执行 ...

  3. Thread and Peocess

    Thread and Peocess pthread_create() 原型: int pthread_create(pthread_t* thread, pthread_attr_t* attr, ...

  4. Vue 打印预览功能

    需求有几种情况: 1.直接在HTML写页面,将页面上的东西用A4纸打印出来: 2.后台传回PDF文件,前台浏览器预览并打印: 3.后台做好要打印的,传回图片,如base64编码,前台浏览器 预览并打印 ...

  5. Robot Framework（十三） 执行测试用例——创建输出

    3.5创建输出 执行测试时会创建几个输出文件,并且所有这些文件都与测试结果有某种关联.本节讨论创建的输出,如何配置它们的创建位置以及如何微调其内容. 3.5.1不同的输出文件 输出目录 输出文件 日志 ...

  6. 实验3 分支&循环语句（1）

    part  1 1.在循环中使用控制语句continue和break,其功能区别是: continue:只控制本次循环的结束. break:终止并跳出循环,之后的循环也不再执行. 2.在两层嵌套循环中 ...

  7. Linux命令基础操作--vim 归档 压缩 分区 格式化 挂载 Innode

    1 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) 使用 cat命令将查看的文件合并输出到/1.txt 这里的关键:定位到文件,如果后面加上/后被认为是目录 分为两步,先 ...

  8. 关于js作用域问题详解

    执行上下文 函数表达式和函数声明 1. console.log(a); // ReferenceError: a is not defined // ReferenceError(引用错误)对象表明一 ...

  9. JS中鼠标左右键以及中键的事件

    在三维场景中有时候需要判断鼠标的事件,除了使用的click事件,只有鼠标左键有效,而右键无效.而对于onmousedown.onmouseup的时候鼠标的事件左键/右键有效.详细请看w3c上的资料. ...

  10. css3中animation属性animation-timing-function知识点以及其属性值steps()

    在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...