HTML中的SVG

最新推荐文章于 2023-09-04 15:02:25 发布

dianpi2993

最新推荐文章于 2023-09-04 15:02:25 发布

阅读量127

点赞数

原文链接：http://www.cnblogs.com/hongmaju/p/6768969.html

版权

本文详细介绍了SVG（可缩放矢量图形）在Web开发中的四种常见使用方式：直接在浏览器中打开、通过HTML的<img>标签引用、直接在HTML中嵌入SVG标签以及作为CSS背景。此外，还展示了如何在HTML中定义和使用SVG符号。

摘要由CSDN通过智能技术生成

1、SVG的使用方式

1、浏览器直接打开

<svg xmlns="http://www.w3.org/2000/svg" 
    width="200" height="200">
    <!--Face-->
    <circle cx="100" cy="100" r="90" fill="#39F" />
    <!--Eyes-->
    <circle cx="70" cy="80" r="20" fill="white" />
    <circle cx="130" cy="80" r="20" fill="white" />
    <circle cx="65" cy="75" r="10" fill="black" />
    <circle cx="125" cy="75" r="10" fill="black"/>
    <!--Smile-->
    <path d="M 50 140 A 60 60 0 0 0 150 140" 
        stroke="white" stroke-width="3" fill="none" />
</svg>

2、在HTML中使用<img>标签引用

<!DOCTYPE html>
<html>
    <head>
        <title>使用 img 标签引用 SVG 图片</title>
        <style>
            p {
                float: left;
            }
        </style>
    </head>
    <body>
        <h1>Hello SVG with &lt;img&gt;</h1>
        <p><img src="simple.svg" />原始大小</p>
        <p><img src="simple.svg" 
            width="50" height="50" />50 x 50</p>
        <p><img src="simple.svg" 
            width="400" height="400" />400 x 400</p>
    </body>
</html>

3、直接在HTML中使用SVG标签

<!DOCTYPE html>
<html>
    <head>
        <title>在网页中直接使用 SVG 标签</title>
    </head>
    <body>
        <h1>Hello Nested SVG</h1>
        <p>
            <svg xmlns="http://www.w3.org/2000/svg" 
                width="200" height="200">
                <!--Face-->
                <circle cx="100" cy="100" r="90" fill="#39F" />
                <!--Eyes-->
                <circle cx="70" cy="80" r="20" fill="white" />
                <circle cx="130" cy="80" r="20" fill="white" />
                <circle cx="65" cy="75" r="10" fill="black" />
                <circle cx="125" cy="75" r="10" fill="black"/>
                <!--Smile-->
                <path d="M 50 140 A 60 60 0 0 0 150 140" 
                    stroke="white" stroke-width="3" fill="none" />
            </svg>
        </p>
    </body>
</html>

4、作为CSS背景

<!DOCTYPE html>
<html>
    <head>
        <title>在网页中直接使用 SVG 标签</title>
        <style>
            body {
                background: #EFEFEF;
            }
            #bg {
                width: 400px;
                height: 400px;
                background: white url(simple.svg) repeat;
                box-shadow: rgba(0,0,0,.5) 2px 3px 10px;
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <h1>Hello SVG with CSS</h1>
        <div id="bg">
            
        </div>
    </body>
</html>

2、项目代码

1、预览效果

2、html

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     style="position:absolute;width:0;height:0">
    <defs>
        <symbol viewBox="0 0 26 31" id="location">
            <path fill="#FFF" fill-rule="evenodd"
                  d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
        </symbol>
        <symbol viewBox="0 0 14 8" id="arrow">
            <path fill="#FFF" fill-rule="evenodd"
                  d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
        </symbol>
       
    </defs>
</svg>

<div class="index-3vsmj">
            <svg class="index-3guVd">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#location"></use>
            </svg>
            <span class="index-1cnKa">红马車</span>
            <svg class="index-9eIfV">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow"></use>
            </svg>
        </div>