zoukankan html css js c++ java

SVG在网页中的四种使用方式

1，直接打开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标签引用 img.html

<!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标签 nest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nest</title>
</head>
<body>
    <h1>Hello Nested 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>

查看全文

相关阅读:
PHP中有多态么
 【Android】九宫格实现
 采用xshell链路本地虚拟机Linux
读取资源文件的工具.
dede织梦背景经常使用标签
 PHP第三个教训 PHP基本数据类型
 Linux经常使用的命令（必看）
易Android登录Demo
[2013山东ACM]省赛 The number of steps （可能DP，数学期望）
web开发性能优化---UI接口章

原文地址：https://www.cnblogs.com/stono/p/4655490.html