1、SVG的使用方式
1、浏览器直接打开
<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中使用![]()
标签引用
DOCTYPE html>
<html>
<head>
<title>使用 img 标签引用 SVG 图片title>
<style>
p {
float: left;
}
style>
head>
<body>
<h1>Hello SVG with <img>h1>
<p><img src="simple.svg" />原始大小p>
<p><img src="simple.svg"
width="50" height="50" />50 x 50p>
<p><img src="simple.svg"
width="400" height="400" />400 x 400p>
body>
html>
3、直接在HTML中使用SVG标签
DOCTYPE html>
<html>
<head>
<title>在网页中直接使用 SVG 标签title>
head>
<body>
<h1>Hello Nested SVGh1>
<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背景
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 CSSh1>
<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>