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. Obj-C Memory Management

    Memory management is one of the most important process in any programming language. It is the proces ...

  2. spark中产生shuffle的算子

    Spark中产生shuffle的算子 作用 算子名 能否替换,由谁替换 去重 distinct() 不能 聚合 reduceByKey() groupByKey groupBy() groupByKe ...

  3. 远程linux服务器mysql数据库定期备份和删除

    网上已经有部分关于Linux下定期备份mysql的方法,但是很多步骤不够详细,不适合新手,自己琢磨了很久,终于搞定了. 1.Linux服务器一般是ssh协议,如果本地也是Linux环境,可以直接通过s ...

  4. 在Mac里给Terminal终端自定义颜色

    Mac里终端显示默认是一种颜色,太单调了. 然而我们可以自定义这些颜色显示.进入-目录,编辑文件.bash_profile, 输入如下内容: 第三行那些fxfxax看起来是不是像天书?实际上是有规律的 ...

  5. java导入Excel表格数据

    首先导入Excel数据需要几样东西 第一需要两个依赖包,这里直接是在pom注入依赖 <!--excel--> <dependency> <groupId>org.a ...

  6. python基本排序算法（一）

    一.冒泡排序 这个算法的名字由来是因为越大的元素会经由交换慢慢“浮”到数列的顶端(升序或降序排列),就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样,故名“冒泡排序”. 冒泡排序算法的原理如下: 比 ...

  7. Delphi 中内存映射对于大文件的使用

    这篇文章主要介绍了Delphi 中内存映射对于大文件的使用的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下 Delphi 中内存映射对于大文件的使用 平时很少使用大文件的内存映射,碰巧遇到了 ...

  8. Bootstrap 网格系统(Grid System)实例3

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  9. Js自学学习-笔记6-8

    <!-- 第6-7课笔记 --> <!-- for循环 for(条件1:判断:变化)其实就是if嵌套 while do for循环简化版 可以用do while swith case ...

  10. OmniFocus

    褪墨・时间管理 “把所有事情都从你的脑袋里弄出来.在事情出现就做好相关行动的一系列决定,而不是在事情爆发的时候.以合适的类别组织好你的项目的各种提醒以及下一步行动.保持你的系统更新和完整,及时进行回顾 ...