在页面中嵌入svg的几种方法

//在页面中嵌入svg的方法1:使用 <embed> 标签<embed> 标签被所有主流的浏览器支持，并允许使用脚本。注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。语法：

<embed id="showsvg" src="svgFile/rect.svg" width="300" height="100" type="image/svg+xml"/>

重点：js如何找到页面中的svg并且操作svg中某个图元首先给图元添加一个id的属性k变量

document.getElementById("showsvg").getSVGDocument().getElementById(k).style.stroke="#e4393c"

 

 

2:使用 <object> 标签<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！语法：

<object data="svgFile/rect.svg" width="300" height="200" type="image/svg+xml"/>

 

3:使用iframe标签<iframe> 标签可工作在大部分的浏览器中。语法：

<iframe src="rect.svg" width="300" height="100"></iframe>

 

4:使用img语法：

<img src="svgFile/rect.svg" width="300" />

或者将svg作为背景图嵌入到页面中也可以

div { background: url('svgFile/rect.svg') no-repeat center; background-size : 200px 200px; }

 

转载于:https://www.cnblogs.com/pengfei25/p/8416792.html