SVG矢量图

最新推荐文章于 2024-05-10 12:42:21 发布

Misnice

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量2k

点赞数

分类专栏： HTML 文章标签： svg svg矢量图矢量图

本文链接：https://blog.csdn.net/Misnice/article/details/104067909

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、svg与canvas画布的区别

canvas是html5提供的新元素，而svg存在的历史要比canvas久远，svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。
1.canvas依赖分辨率,放大后失真；
不支持事件处理器；文本渲染力弱；能够以 .png 或 .jpg 的格式保存结果图形最合适图像密集型的游戏，其中许多的对象会被频繁的重绘；
2.SVG不依赖分辨率放大后不失真；
支持事件处理器；最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）；不适合游戏的应用；复杂度高会减慢渲染的速度；以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入或者直接在html文件中引入SVG标签；

二、svg的几种使用方法

1.直接打开svg文件 simple.svg

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <circle cx="100" cy="100" r="90" fill="#39F" />
    <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" />
    <path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" />
</svg>

2.在html中使用img标签引用svg文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>use img ref SVG</title>
</head>
<body>
    <h1>Hello SVG with &lt;img&gt;</h1>
    <p><img src="simple.svg" alt="">原始大小</p>
    <P><img src="simple.svg" alt="" width="50" height="50">50X50</P>
    <p><img src="simple.svg" alt="" width="400" height="400">400X400</p>
</body>
</html>

3.在html中直接使用svg标签绘制图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>Hello SVG</h1>
    <p>
        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <circle cx="100" cy="100" r="90" fill="#39F" />
    <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" />
    <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作为背景 css.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css by 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>