蛋疼的SVG外部引用方式
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外部引用方式的更多相关文章
- svg复用方式<g>, <defs>, <symbol>, <use>
svg复用元素的方式主要有 <g>, <defs>, <symbol>, <use> 1. <g> group, 分组,定义一组元素,初始不 ...
- SVG简介
最近遇到SVG这个名词,于是查阅资料,做个笔记. 前言 图片的数字化.将图片存储为数据有两种方案. 位图.也被称为光栅图.即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合.每个点发出的光有独 ...
- o'Reill的SVG精髓（第二版）学习笔记——第五章
第五章 文档结构 5.1 结构与表现 XML的目标之一便是提供一种能将结构从视觉表示中独立出来的方法. 但是不幸的是,关于XML的很多讨论都强调结构而非表现. 我们将通过详细讨论如何在SVG中指定表现 ...
- 【转】【翻译】对响应式SVG的再思考
来源: http://www.w3ctech.com/topic/1555 原文地址:http://www.smashingmagazine.com/2014/03/rethinking-respon ...
- svg滤镜学习
SVG滤镜绝对称得上是他最强大的功能之一,在不影响任何文档结构的前提下,允许你给你的矢量图形添加各种专业视觉效果,我个人给他的定义就是,把PS装到了网页上. 一. SVG滤镜的原理 基本原理描述太多 ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- svg学习之旅（1）
Canvas 与 SVG 的比较 下表列出了 canvas 与 SVG 之间的一些不同之处. Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果 ...
- 通过SVG与CSS3实现向上图标
需求 H5活动页需要用的图标很少,暂时没有使用iconfont的必要性,而通过图片的话额外增加UI的工作量以及增加请求数,前端也有很多实现简单图标的方法,所以就尝试自己去解决,写一个"返回顶 ...
- SVG初尝试(一)
SVG简介 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics).其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它 ...
随机推荐
- Android（java）学习笔记140：常用的对话框
一.常见对话框属性: 1. AlertDialog.Builder属性 • setTitle: 为对话框设置标题 :• setIcon : 为对话框设置图标:• setMessage: 为对话框设置 ...
- MIPS程序设计实例
第一题:用系统功能调用实现简单输入输出 题目要求 利用系统功能调用从键盘输入,转换后在屏幕上显示,具体要求如下: 1.如果输入的是字母(A~Z,区分大小写)或数字(0~9),则将其转换成对应的英文单词 ...
- Vue 前端面试题[转]
https://mp.weixin.qq.com/s/Uxhx2dJ1Xbm6N3Gl7wNZNw Vue 前端面试题 游荡de蝌蚪 前端开发 1周前 作者:游荡de蝌蚪 https://segmen ...
- .net MVC下跨域Ajax请求(CORS)
二.CROS (Cross-origin Resource Sharing) CROS相当于一种协议,由浏览器.服务端共同完成安全验证,进行安全的跨域资源共享.对于开发人员来说就跟在本站AJAX请求一 ...
- iOS开发遇到的坑之三--使用asi框架在xcode下正常运行,但是打包时却不能进行网络访问
前言: 前两篇博客遇到的问题是前几天在实验室开发的时候遇到的,花了两三天时间在上面,今天突然心血来潮,想把这些”坑”写下来,所以才有了这两篇写的很丑的博客随笔 今天在开发时又遇到一个问题,那就是标题所 ...
- 摘抄 Promise原理
1.简单的promise: //极简promise雏形 function Promise(fn){ var value = null; callbacks = [];//callback为数组,因为可 ...
- hihoCoder-1093-SPFA
SPFA的卓越之处就在于处理多点稀疏图,因为点太多的话,我们直接用矩阵来存图的话是存不下的. 所以当我们用邻接矩阵来存图的话,我们就可以用SPFA来解决这类问题,spfa就是优化版的bellman-f ...
- UVa-227-谜题
这题的话,我们读入的时候,可以用scanf单个读入字符,也可以用getchar函数来读入. scanf scanf读入串字符的时候,遇到空格.回车和TAB等空白字符就会停止读入,但是如果读入单个字符就 ...
- 【dp】bzoj1613: [Usaco2008 Jan]Running贝茜的晨练计划
还记得这是以前看上去的不可做题…… Description 奶牛们打算通过锻炼来培养自己的运动细胞,作为其中的一员,贝茜选择的运动方式是每天进行N(1<=N<=10,000)分钟的晨跑.在 ...
- GIMP图片头发的处理
1/选中图片,添加Alpha Channel 2/点击Duplicate Layer,复制图层: 3/接着需要调整一下色差,选中Color下的Curves,调节曲线,使背景看起来更白一点 4/选中Co ...