初识SVG(一)

最新推荐文章于 2024-02-04 10:49:34 发布

陈迹·清欢

最新推荐文章于 2024-02-04 10:49:34 发布

阅读量143

点赞数

分类专栏： # SVG 文章标签： svg html html5 css

本文链接：https://blog.csdn.net/qq_36360463/article/details/104506195

版权

SVG 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.1.SVG简介

使用XML描述的矢量文件
W3C标准(1.1)(http://www.w3.org/TR/SVG11)
浏览器支持情况(http://caniuse.com/#cats=SVG)
IE9
Chrome 33.0+
Firefox 28.0+
Safari 7.0+

1.2.使用方式

在浏览器直接打开(把对应svg代码保存为后缀为svg的文件，浏览器可直接识别)
在HTML使用img标签引用(把img的src属性设置为svg文件的路径即可)
在HTML中使用svg标签
作为CSS背景(background的url)
第三个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个SVG示例</title>
</head>
<body>
<h1>Hello SVG!</h1>
<div>
    <svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 200px">
        <!--face-->
        <circle cx="100" cy="100" r="90" fill="#39f"></circle>

        <!--eye-->
        <circle cx="70" cy="80" r="20" fill="white"></circle>
        <circle cx="130" cy="80" r="20" fill="white"></circle>
        <circle cx="65" cy="75" r="10" fill="balck"></circle>
        <circle cx="125" cy="75" r="10" fill="balck"></circle>

        <!--smile-->
        <path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none"></path>

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