微信扫一扫 分享朋友圈

已有 168 人浏览分享

开启左侧

网页怎样引入svg图片的方法

[复制链接]
168 0
1. 直接插入页面
在html页面,可以直接使用svg标签。
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
        </head>
        <body>
                <!-- 一个svg图片 -->
                <svg width="200" height="150" style="border: 1px solid steelblue">
                        <!-- 里面有一个矩形 -->
                        <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
                </svg>
        </body>
</html>

2. img标签引入
除了在网页里直接写svg标签,也可以通过img引入,就像引入jpeg、png图片一样。
1)新建svg图片
那么我们就要先新建一个svg图片文件,我们把上面直接写在网页里的svg拿来用:
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
        <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>
这边内容有两点不一样:
1. 需要声明命名空间 xmlns 这个属性,命名空间可以本文尾部列出的参考资料。
2. 移除了原先写在 svg 标签上的样式,style="border: 1px solid steelblue"。
把内容保存到test.svg文件,这个就是一张图片文件了,可以尝试在浏览器打开看看。
2)使用img标签引入
假设test.svg和网页文件在同一个目录下:
<img src="test.svg" style="border: 1px solid steelblue" />
和引入jpeg、png类似,直接src属性设置图片路径即可,另外我们把原先在svg的样式移到了img标签这边。
运行效果和上面是一样的:

3. css引入
css引入就是把图片当成背景图引入:
<style type="text/css">
        .svg {
                width: 200px;
                height: 150px;
                border: 1px solid steelblue;
                background-image: url(test.svg); // 当成背景引入
        }
</style>
<div class="svg"></div>

4. object引入
和img引入类似,需要一个svg文件,然后用属性data引入:
<object data="test.svg" style="border: 1px solid steelblue"></object>


免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

56

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2022-11-27 23:14 , Gzip On, Redis On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。