SVG

最新推荐文章于 2019-05-20 17:37:00 发布

qq_27628085

最新推荐文章于 2019-05-20 17:37:00 发布

阅读量403

点赞数

分类专栏： html5 文章标签： svg在网页中的使用

本文链接：https://blog.csdn.net/qq_27628085/article/details/82222850

版权

html5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在网页中使用SVG

将 SVG 作为图像导入
将 SVG放入 iframe 中导入
将 SVG 作为object对象导入
使用内联 SVG

将SVG作为图像导入

将.svg文件导入普通的<img>标签内，这是将SVG导入html文档的最简单方法。

<img src="eg.svg" alt="eg">

你需要确保你的服务器支持.svg文件。

同时你也可以在css中把.svg文件作为一个background-image导入。

/*
注意要加一个备用.png图像，以防浏览器无法显示svg
*/
.svg-bg{
background:url('eg.png');
background-image:url('eg.png');

}

缺点：SVG作为图像引用时，大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)

依据浏览器的安全策略，SVG中定义的脚本也可能不会执行

使用Object 或 iframe导入SVG图像

作为一个<object>导入，与图像导入相似。<object>通过data属性连接要导入的.svg文件。注意，MIME type必须是image、svg+xml。

<object type="image/svg+xml" data="eg.svg" class="eg">
这是个一个SVG的例子
</object>

.svg文件嵌入到一个<iframe>框架内

<iframe src='eg.svg' class='eg'></iframe>

上面两种方法都可以用css控制svg的样式

.eg{
    display:block;
    margin:10em auto;
    border-radius:20px;
}

使用内联SVG

直接在html中嵌入SVG

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

            <rect x="20" y="20" width="250" height="250"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>

        </svg>
    </body>
</html>

直接嵌入SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。