svg矢量图标在html中的使用, （知识点：1.通过h5中的css实现点击变色，2.一个svg文件包含多个图标)

一、制作svg

用 ai 制作了一个 svg文件/images/buy.svg，如下，做了一些修改，把g标签的id改成 test，方便引用,可以有多个<g>,每个里面都可以包含一个单独的图像，在h5中可以单独引用

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="670 -135 400 400" style="enable-background:new 670 -135 400 400;" xml:space="preserve">
<style>
.* { fill:#ff88ee; }
:hover{ fill: #000; }

</style>
<g id="test" viewBox="670 -135 400 400" >

<path d="M973.9,170.7c-12.1,0-21.9,10.3-21.9,23.1c0,12.8,9.8,23.1,21.9,23.1c12.1,0,22-10.3,22-23.1
C995.9,181,986.1,170.7,973.9,170.7z"><set attributeName="fill" to="blue" begin="click"/></path>
<path d="M819.3,172.3c-11.7,0-21.2,10-21.2,22.3c0,12.3,9.5,22.3,21.2,22.3c11.7,0,21.2-10,21.2-22.3
C840.4,182.3,831,172.3,819.3,172.3z"/>
<path d="M1011.8,136.9c-0.2,0-0.3,0-0.5,0.1c-0.1,0-0.2-0.1-0.2-0.1H827.8c-15.8,0-17.5-3.6-20.7-15.1c-0.8-3-1.7-6.2-2.7-9.7
l188-27.9c24.1-3.6,28.4-14.5,28.4-34.7V1c0-17.6-13.7-32-30.4-32H805.6c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0c-6.6,0-12,5.8-12,13.1
s5.4,13.1,12,13.1c0.1,0,0.2,0,0.3,0c0,0,0.1,0,0.1,0h173.6c8.4,0,15.2,7.2,15.2,16v22.6c0,14.2-0.4,16.6-15.4,18.8l-183,28.9
c-18-66.2-44-162.6-44-162.6c-0.9-3.5-3.9-5.8-7.3-5.8h-36.5c-0.1,0-0.2,0-0.3,0.1c-0.2,0-0.4-0.1-0.6-0.1
c-6.7,0-12.2,5.9-12.2,13.3c0,7.3,5.4,13.3,12.2,13.3c0.2,0,0.5-0.1,0.7-0.1c0.1,0,0.1,0.1,0.2,0.1h18.4
c7.5,27.8,39.9,148,53.4,197.1c4.8,17.3,11.8,26.7,35.3,26.7h195.7c0.1,0,0.1,0,0.2,0c0.2,0,0.3,0.1,0.5,0.1
c6.7,0,12.2-5.9,12.2-13.3C1024,142.8,1018.5,136.9,1011.8,136.9z"/>
</g>
</svg>

二、html中引用这个svg

css:

<style>
.mytest{
fill:#00f;
background-color:#600;
}

/* 点击时的样式
.mytest:active{
fill:#0f0;
}
</style>

html:

<svg viewBox="670 -135 400 400" class="mytest" ><use  xlink:href="/images/buy.svg#test" /></svg>

通过<svg>方式嵌入svg时，  在.svg文件中指定的css(用 <style>标记的属性）会被忽略掉。只能在html中通过 css或直接指定style. 常用的style是fill,就是填充色

通过<img> 或background引入svg，svg文件中的css可起作用