在HTML中使用SVG

最新推荐文章于 2024-08-28 07:00:00 发布

lfsf802

最新推荐文章于 2024-08-28 07:00:00 发布

阅读量2.3w

点赞数 4

分类专栏： J2EE

本文链接：https://blog.csdn.net/lfsf802/article/details/21890783

版权

J2EE 专栏收录该内容

104 篇文章 5 订阅

订阅专栏

如何在HTML中显示SVG？

有四种方式能够在HTML中显示SVG。

第一种：embed标签

这种标签被所有主流的浏览器支持，而且优点是支持脚本使用。这种标签是adobe svg viewer所倡导的使用方法，但是它不是XHTML的规范。

语法为：

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

实例代码：

svg文件名称为a.svg，代码如下：

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

html文件代码：

<html>
<body>
<embed src="a.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>

第二种标签：object标签

这种标签是HTML4的标准标签，被所有支持HTML4标签的浏览器支持，它的缺点是不能够支持脚本使用，如果是新版本的svg viewr在使用object标签的时候就需要注意，在IE下不支持。

语法为：

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

实例代码：

<html>
<body>
<object data="a.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>

第三种标签：iframe标签

这种标签在大部分浏览器中支持，而且在项目中用到的也很多。

语法为：

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

实例代码：

<html>
<body>
<iframe src="a.svg" width="300" height="100">
</iframe>
</body>
</html>

第四种：直接在html中写svg脚本

下面的实例代码：

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</body>
</html>