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 <img></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;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>