如何把svg引入页面,如何使用svg并且修改svg的css样式

 

原标题:如何把svg引入页面,如何使用svg并且修改svg的css样式

网页如何引入svg


常用的svg使用,引入,插图方法,推荐以下几种引入方法


1、直接网页插入,把svg标签放进web中,如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg</title>
</head>
<body>
    <svg t="1659002299620" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5895" width="200" height="200"><path d="M490.666667 533.333333v256a64 64 0 0 1-64 64h-192a64 64 0 0 1-64-64v-192a64 64 0 0 1 64-64h256z m298.666666 0a64 64 0 0 1 64 64v192a64 64 0 0 1-64 64h-192a64 64 0 0 1-64-64V533.333333h256z m-362.666666 64h-192v192h192v-192z m362.666666 0h-192v192h192v-192zM426.666667 170.666667a64 64 0 0 1 64 64v256H234.666667a64 64 0 0 1-64-64v-192a64 64 0 0 1 64-64h192z m266.666666 0a160 160 0 1 1 0 320 160 160 0 0 1 0-320zM426.666667 234.666667h-192v192h192v-192z m266.666666 0a96 96 0 1 0 0 192 96 96 0 0 0 0-192z" p-id="5896"></path></svg>
</body>
</html>


2、使用 img 标签引入页面,如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg</title>
</head>
<body>
    <img src="./name.svg" />
</body>
</html>


3、使用css插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg</title>
    <style type="text/css">
    .svg {
        width: 200px;
        height: 200px;
        border: 1px solid steelblue;
        background-image: url(./name.svg); // 当成背景引入
    }
    </style>
</head>
<body>
    <div class="svg"></div>
</body>
</html>



4、使用 object 标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg</title>
</head>
<body>
    <object data="./name.svg"></object>
</body>
</html>



教你如何每天领取饿了么红包,饿了么优惠卷,饿了么会员?

教你如何每天领取美团红包,美团优惠卷,美团会员?

其他相关文章
    领支付宝红包赞助服务器费用
    微信公众号:小猪波罗蜜
    关注公众号,回复999,可联系站长解答疑问哦。每天分享更多有趣的事儿,有趣有料!
    99人已关注

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信图片_20190322181744_03.jpg

    微信扫一扫打赏

    请作者喝杯咖啡吧~

    支付宝扫一扫领取红包,优惠每天领

    二维码1

    zhifubaohongbao.png

    二维码2

    zhifubaohongbao2.png