尝试使用SVG精灵

时间：2019-02-17 18:16:53

标签： svg

在我的模板上无法使用SVG精灵。我在Google上搜索了很多，但是发现解决方案对我不起作用。

当我使用时：

<svg>
   <use xlink:href="icons.svg#icon"></use>
</svg>

浏览器显示“阴影根已关闭”

当我尝试将SVG用作内联时，SVG标记内的g标记与父SVG标记相距很远。

如何使我的SVG文件有用？

我的svg文件> Codepen

1 个答案:

答案 0 :(得分：1)

首先从带有图标的文件中创建一个精灵图标。

  • 为此，请使用<symbol>标签来包装每个图标的代码 标签<g>
    • 中的
  • 然后另存为独立的icons.svg文件，并将其添加到index.html旁边的同一文件夹
  • 将此文件添加到应用程序的HTML

<object type="image/svg+xml" data="icons.svg"> Your browser does not support SVG </object>

或如果带有图标的文件位于另一个文件夹中，则指定完整路径

<object type="image/svg+xml" data="images/icons.svg"> Your browser does not support SVG </object>

已转换的精灵图标文件的示例：

<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 676 289" style="enable-background:new 0 0 676 289;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#EA3B58;}
	.st1{fill:#FFFFFF;}
	.st2{fill:#4C76BE;}
	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
	.st4{fill:#F99400;}
	.st5{fill:#4C75A3;}
	.st6{fill:#00C7FF;}
	.st7{fill:#FC5345;}
	.st8{fill:#71C644;}
</style>
<symbol id="instagram">
	<circle class="st0" cx="68.8" cy="52" r="29.1"/>
	<g>
		<path class="st1" d="M82.6,44.5c-0.2-1.9-0.9-3.5-2.3-4.8c-1.4-1.4-3.2-2-5.2-2.1c-3.3-0.2-11.2-0.3-13.9,0.2
			c-3.2,0.5-5.2,2.4-6.1,5.5C54.5,45.6,54.6,56.6,55,59c0.5,3.2,2.4,5.3,5.7,6.1c2.2,0.6,13.1,0.5,15.6,0.1c3.2-0.5,5.3-2.4,6.2-5.6
			C83.1,57.2,82.8,46.7,82.6,44.5z M80,58.6c-0.4,2.5-2,4-4.5,4.3c-2.3,0.2-12.4,0.4-14.5-0.2c-2-0.6-3.2-1.9-3.5-4
			c-0.3-1.9-0.4-11.6,0-14.2c0.4-2.4,2-4,4.5-4.2c2.5-0.3,11.5-0.3,13.9,0.1c2.5,0.4,4,2,4.2,4.5C80.3,47,80.4,56.1,80,58.6z
			 M68.8,44.3c-4,0-7.2,3.2-7.2,7.2c0,4,3.2,7.2,7.2,7.2c4,0,7.2-3.2,7.2-7.2C76,47.5,72.8,44.3,68.8,44.3z M68.7,56.2
			c-2.5,0-4.6-2.1-4.6-4.7c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C73.4,54.1,71.3,56.2,68.7,56.2z M78,44
			c0,0.9-0.8,1.7-1.7,1.7s-1.7-0.7-1.7-1.7c0-1,0.8-1.7,1.7-1.7C77.2,42.3,78,43.1,78,44z"/>
	</g>
</symbol>
	<symbol id="facebook">
		<circle class="st2" cx="139" cy="52" r="29.1"/>
		<path class="st3" d="M143.8,41.1c1,0,1.9,0,2.9,0c0.1,0,0.2,0,0.4,0v-5c-0.5-0.1-1.1-0.1-1.6-0.2c-1,0-2-0.1-3-0.1			c-1.5,0-3,0.4-4.2,1.3c-1.4,1-2.2,2.5-2.5,4.2c-0.1,0.7-0.2,1.4-0.2,2.2c0,1.1,0,2.3,0,3.4v0.4h-4.8V53h4.8v14.1h5.9V53h4.8c0.2-1.9,0.5-3.7,0.7-5.7c-0.4,0-0.7,0-1.1,0c-1.4,0-4.5,0-4.5,0s0-2.8,0-4C141.5,41.7,142.5,41.2,143.8,41.1z"/>
	</symbol>
<symbol id="ok">
	<circle class="st4" cx="209.2" cy="52" r="29.1"/>
	<g>
		<path class="st1" d="M212.7,59.3c0.7,0.6,1.3,1.1,1.8,1.7c1,0.9,1.9,1.9,2.8,2.9c0.9,1.1,0.8,2.5-0.2,3.4c-1,0.9-2.4,1-3.5,0	c-1.3-1.3-2.6-2.6-3.9-3.9c-0.2-0.2-0.3-0.5-0.5-0.7c-1,0.9-1.7,1.7-2.5,2.4c-0.7,0.7-1.4,1.4-2.1,2c-1.1,1.1-2.6,1.1-3.6,0.1c-1.1-1-1.1-2.5,0-3.7c1.3-1.3,2.6-2.6,3.9-4c0.1-0.1,0.2-0.3,0.3-0.3c-1.5-0.7-3-1.3-4.4-2.1c-1-0.6-1.4-1.7-1.1-2.8c0.5-1.7,2.1-2.3,3.7-1.6c1.1,0.5,2.2,1.1,3.3,1.3c2.6,0.7,5,0.2,7.4-1c0.5-0.2,1-0.5,1.5-0.6c1.2-0.2,2.3,0.5,2.7,1.6c0.4,1.1,0.1,2.4-1,3c-1.2,0.7-2.5,1.2-3.8,1.8C213.4,59.1,213.2,59.2,212.7,59.3z"/>
		<path class="st1" d="M200.9,44.2c-0.2-3.9,3.1-8.3,8.3-8.3c5.2,0,8.5,4.5,8.4,8.5c-0.1,4.6-3.8,8.3-8.4,8.3
			C203.7,52.5,200.6,47.9,200.9,44.2z M209.1,47.5c1.9,0,3.4-1.4,3.4-3.3c0-1.8-1.5-3.2-3.3-3.2c-1.9,0-3.3,1.4-3.3,3.2
			C205.9,46,207.4,47.5,209.1,47.5z"/>
	</g>
</symbol >
<symbol id="vk">
	<circle class="st5" cx="279.4" cy="52" r="29.1"/>
	<g>
		<path class="st1" d="M281.5,47.6c0,1.1,0,2.1,0,3.2c0,0.3,0.1,0.6,0.3,0.8c0.3,0.5,0.7,0.5,1.1,0.2c0.6-0.5,1.1-1.1,1.5-1.7
			c1.1-1.6,2-3.4,2.8-5.2c0,0,0-0.1,0.1-0.1c0.3-0.7,0.5-0.8,1.2-0.8c1.7,0,3.4,0,5.1,0c0.3,0,0.6,0,0.8,0.1
			c0.4,0.1,0.6,0.4,0.5,0.8c-0.1,0.5-0.3,1-0.5,1.4c-0.8,1.5-1.8,2.8-2.8,4.1c-0.5,0.7-1.1,1.4-1.6,2.1c-0.5,0.8-0.5,1.3,0.2,2
			c0.9,0.9,1.8,1.7,2.6,2.6c0.6,0.7,1.2,1.5,1.8,2.2c0.2,0.2,0.3,0.5,0.3,0.8c0.1,0.6-0.1,0.9-0.7,1.1c-0.3,0.1-0.6,0.1-0.9,0.1
			c-1.5,0-3,0.1-4.4,0.1c-0.8,0-1.5-0.3-2-0.8c-0.8-0.7-1.4-1.5-2.2-2.2c-0.3-0.3-0.6-0.6-0.9-0.9c-0.1-0.1-0.2-0.2-0.4-0.3
			c-0.4-0.2-0.7-0.2-1,0.1c-0.4,0.4-0.6,0.9-0.7,1.5c-0.1,0.5-0.1,0.9-0.1,1.4c-0.1,0.6-0.4,1-1,1c-2.1,0.1-4.2,0.2-6.2-0.8
			c-1.8-0.9-3.4-2.1-4.7-3.7c-2.8-3.4-4.9-7.2-6.6-11.2c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.5,0.1-0.8,0.5-0.9c0.2,0,0.4-0.1,0.7-0.1
			c1.4,0,2.8,0,4.2,0c0.7,0,1.2,0.3,1.5,1c0.7,1.8,1.6,3.4,2.6,5.1c0.4,0.7,0.8,1.3,1.5,1.8c0.3,0.2,0.6,0.4,1,0.3
			c0.1,0,0.2-0.1,0.3-0.2c0.3-0.4,0.4-0.9,0.4-1.4c0.2-1.2,0.2-2.4,0.1-3.6c0-0.4-0.1-0.8-0.2-1.2c-0.2-0.7-0.7-1-1.3-1.2
			c-0.1,0-0.3-0.1-0.4-0.2c0.1-0.1,0.2-0.3,0.3-0.4c0.3-0.4,0.7-0.5,1.2-0.6c1.7-0.3,3.4-0.3,5.1-0.1c0.2,0,0.3,0,0.5,0.1
			c0.8,0.2,1,0.4,1.1,1.3c0.1,0.7,0,1.4,0,2.1C281.5,47,281.5,47.3,281.5,47.6C281.5,47.6,281.5,47.6,281.5,47.6z"/>
	</g>
</symbol>
<symbol id="twitter">
	<circle class="st6" cx="419.9" cy="52" r="29.1"/>
	<path class="st3" d="M413.7,59.9c-3.4-0.1-5.5-2.5-6-4.5c0.9,0.2,1.9,0.1,2.8-0.1c0,0,0,0,0.1,0c-1.8-0.4-3.2-1.4-4.2-3
		c-0.6-1-1-2.2-0.9-3.4c0.9,0.5,1.9,0.8,2.9,0.8c-1.4-1-2.3-2.3-2.7-3.9c-0.4-1.6-0.1-3.2,0.7-4.7c3.5,4.1,7.9,6.4,13.3,6.8
		c0-0.3-0.1-0.5-0.1-0.7c-0.2-1.5,0.1-2.9,0.9-4.2c1-1.6,2.5-2.6,4.4-2.9c2.2-0.4,4.1,0.3,5.7,1.8c0.1,0.1,0.2,0.1,0.3,0.1
		c1.3-0.3,2.6-0.8,3.8-1.4c0,0,0.1,0,0.1,0c0,0,0,0,0,0c-0.5,1.5-1.4,2.7-2.8,3.5c1.3-0.1,2.4-0.5,3.6-1c0,0,0,0,0,0
		c-0.2,0.3-0.5,0.7-0.7,1c-0.7,0.8-1.5,1.6-2.4,2.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,1,0,1.9-0.1,2.9c-0.2,2-0.8,3.9-1.7,5.8
		c-0.9,1.9-2,3.6-3.5,5.1c-2.5,2.5-5.4,4.2-8.9,5c-1.2,0.3-2.4,0.4-3.6,0.4c-3.7,0.1-7.2-0.8-10.4-2.8c0,0-0.1-0.1-0.2-0.1
		c2.3,0.2,4.4,0,6.5-0.9C411.7,61.2,412.7,60.7,413.7,59.9z"/>
</symbol>
<symbol id="GooglePlus">
	<circle class="st7" cx="349.7" cy="52" r="29.1"/>
	<g>
		<path class="st1" d="M343.8,49.3c0,0.1,0,0.1,0,0.2c0,1.3,0,4.3,0,4.3s5.6,0,5.9,0c0,0.4-0.5,2.2-2.2,3.3c-1,0.7-2.1,1-3.2,1
			c-0.8,0.1-1.6,0-2.4-0.3c-2.5-0.8-4.3-3-4.6-5.7c-0.1-0.7,0-1.3,0.1-2c0.7-3.2,3.8-5.6,7.3-5.1c1.5,0.2,2.4,0.9,3.2,1.6
			c1.1-1.1,2.1-2.1,3.2-3.2c-0.3-0.2-0.9-0.8-2-1.4c-1.6-0.9-3.4-1.4-5.2-1.4c-0.4,0-0.7,0-1.1,0c-0.6,0-1.2,0.1-1.8,0.3
			c-2.4,0.6-4.4,1.9-5.9,3.8c-1.5,1.8-2.3,4-2.4,6.3c-0.1,1,0,2,0.2,3c0.6,2.7,2.1,4.9,4.3,6.6c1.8,1.3,3.7,2,5.9,2.1
			c1.2,0.1,2.4,0,3.6-0.4c2.2-0.6,4.1-1.7,5.4-3.6c2-2.7,2.5-6.1,1.9-9.3C350.7,49.3,347.3,49.3,343.8,49.3z"/>
		<polygon class="st1" points="367.6,49.4 363.8,49.4 363.8,45.7 363.8,45.6 363.7,45.6 360.9,45.6 360.8,45.6 360.8,45.7 
			360.8,49.4 357,49.4 356.9,49.4 356.9,49.5 356.9,52.3 356.9,52.4 357,52.4 360.8,52.4 360.8,56.2 360.8,56.3 360.9,56.3 
			363.7,56.3 363.8,56.3 363.8,56.2 363.8,52.4 367.6,52.4 367.7,52.4 367.7,52.3 367.7,49.5 367.7,49.4 		"/>
	</g>
</symbol>
<symbol id="Search">
	<path class="st8" d="M515,67.5h-25c-5,0-9-4-9-9v-25c0-5,4-9,9-9h25c5,0,9,4,9,9v25C524,63.5,520,67.5,515,67.5z"/>
	<path class="st1" d="M506.1,54.2c-6.1,0-11-4.9-11-11s4.9-11,11-11c6.1,0,11,4.9,11,11S512.1,54.2,506.1,54.2z M506.1,35.1
		c-4.5,0-8.1,3.7-8.1,8.1s3.7,8.1,8.1,8.1c4.5,0,8.1-3.7,8.1-8.1S510.6,35.1,506.1,35.1z"/>
	<path class="st1" d="M489.8,60.3c-0.4,0-0.7-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2l8.6-8.6c0.6-0.6,1.5-0.6,2,0c0.6,0.6,0.6,1.5,0,2
		l-8.6,8.6C490.5,60.2,490.1,60.3,489.8,60.3z"/>
</symbol>
 </svg>

  • 图标已加载到您的应用程序中，但不会 在<use>命令
    • 调用之前可见
  • 然后通过ID图标在正确的位置HTML页面上调用它

<svg viewBox="0 0 676 289"> <use xlink:href="icons.svg#instagram" /> </svg>

以下是用于内联添加精灵图标的示例代码：

<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 676 289" style="enable-background:new 0 0 676 289;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#EA3B58;}
	.st1{fill:#FFFFFF;}
	.st2{fill:#4C76BE;}
	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
	.st4{fill:#F99400;}
	.st5{fill:#4C75A3;}
	.st6{fill:#00C7FF;}
	.st7{fill:#FC5345;}
	.st8{fill:#71C644;}
</style>
<symbol id="instagram">
	<circle class="st0" cx="68.8" cy="52" r="29.1"/>
	<g>
		<path class="st1" d="M82.6,44.5c-0.2-1.9-0.9-3.5-2.3-4.8c-1.4-1.4-3.2-2-5.2-2.1c-3.3-0.2-11.2-0.3-13.9,0.2
			c-3.2,0.5-5.2,2.4-6.1,5.5C54.5,45.6,54.6,56.6,55,59c0.5,3.2,2.4,5.3,5.7,6.1c2.2,0.6,13.1,0.5,15.6,0.1c3.2-0.5,5.3-2.4,6.2-5.6
			C83.1,57.2,82.8,46.7,82.6,44.5z M80,58.6c-0.4,2.5-2,4-4.5,4.3c-2.3,0.2-12.4,0.4-14.5-0.2c-2-0.6-3.2-1.9-3.5-4
			c-0.3-1.9-0.4-11.6,0-14.2c0.4-2.4,2-4,4.5-4.2c2.5-0.3,11.5-0.3,13.9,0.1c2.5,0.4,4,2,4.2,4.5C80.3,47,80.4,56.1,80,58.6z
			 M68.8,44.3c-4,0-7.2,3.2-7.2,7.2c0,4,3.2,7.2,7.2,7.2c4,0,7.2-3.2,7.2-7.2C76,47.5,72.8,44.3,68.8,44.3z M68.7,56.2
			c-2.5,0-4.6-2.1-4.6-4.7c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C73.4,54.1,71.3,56.2,68.7,56.2z M78,44
			c0,0.9-0.8,1.7-1.7,1.7s-1.7-0.7-1.7-1.7c0-1,0.8-1.7,1.7-1.7C77.2,42.3,78,43.1,78,44z"/>
	</g>
</symbol>
<symbol id="facebook">
	<circle class="st2" cx="139" cy="52" r="29.1"/>
	<path class="st3" d="M143.8,41.1c1,0,1.9,0,2.9,0c0.1,0,0.2,0,0.4,0v-5c-0.5-0.1-1.1-0.1-1.6-0.2c-1,0-2-0.1-3-0.1
		c-1.5,0-3,0.4-4.2,1.3c-1.4,1-2.2,2.5-2.5,4.2c-0.1,0.7-0.2,1.4-0.2,2.2c0,1.1,0,2.3,0,3.4v0.4h-4.8V53h4.8v14.1h5.9V53h4.8
		c0.2-1.9,0.5-3.7,0.7-5.7c-0.4,0-0.7,0-1.1,0c-1.4,0-4.5,0-4.5,0s0-2.8,0-4C141.5,41.7,142.5,41.2,143.8,41.1z"/>
</symbol>
<symbol id="ok">
	<circle class="st4" cx="209.2" cy="52" r="29.1"/>
	<g>
		<path class="st1" d="M212.7,59.3c0.7,0.6,1.3,1.1,1.8,1.7c1,0.9,1.9,1.9,2.8,2.9c0.9,1.1,0.8,2.5-0.2,3.4c-1,0.9-2.4,1-3.5,0
			c-1.3-1.3-2.6-2.6-3.9-3.9c-0.2-0.2-0.3-0.5-0.5-0.7c-1,0.9-1.7,1.7-2.5,2.4c-0.7,0.7-1.4,1.4-2.1,2c-1.1,1.1-2.6,1.1-3.6,0.1
			c-1.1-1-1.1-2.5,0-3.7c1.3-1.3,2.6-2.6,3.9-4c0.1-0.1,0.2-0.3,0.3-0.3c-1.5-0.7-3-1.3-4.4-2.1c-1-0.6-1.4-1.7-1.1-2.8
			c0.5-1.7,2.1-2.3,3.7-1.6c1.1,0.5,2.2,1.1,3.3,1.3c2.6,0.7,5,0.2,7.4-1c0.5-0.2,1-0.5,1.5-0.6c1.2-0.2,2.3,0.5,2.7,1.6
			c0.4,1.1,0.1,2.4-1,3c-1.2,0.7-2.5,1.2-3.8,1.8C213.4,59.1,213.2,59.2,212.7,59.3z"/>
		<path class="st1" d="M200.9,44.2c-0.2-3.9,3.1-8.3,8.3-8.3c5.2,0,8.5,4.5,8.4,8.5c-0.1,4.6-3.8,8.3-8.4,8.3
			C203.7,52.5,200.6,47.9,200.9,44.2z M209.1,47.5c1.9,0,3.4-1.4,3.4-3.3c0-1.8-1.5-3.2-3.3-3.2c-1.9,0-3.3,1.4-3.3,3.2
			C205.9,46,207.4,47.5,209.1,47.5z"/>
	</g>
</symbol >
<symbol id="vk">
	<circle class="st5" cx="279.4" cy="52" r="29.1"/>
	<g>
		<path class="st1" d="M281.5,47.6c0,1.1,0,2.1,0,3.2c0,0.3,0.1,0.6,0.3,0.8c0.3,0.5,0.7,0.5,1.1,0.2c0.6-0.5,1.1-1.1,1.5-1.7
			c1.1-1.6,2-3.4,2.8-5.2c0,0,0-0.1,0.1-0.1c0.3-0.7,0.5-0.8,1.2-0.8c1.7,0,3.4,0,5.1,0c0.3,0,0.6,0,0.8,0.1
			c0.4,0.1,0.6,0.4,0.5,0.8c-0.1,0.5-0.3,1-0.5,1.4c-0.8,1.5-1.8,2.8-2.8,4.1c-0.5,0.7-1.1,1.4-1.6,2.1c-0.5,0.8-0.5,1.3,0.2,2
			c0.9,0.9,1.8,1.7,2.6,2.6c0.6,0.7,1.2,1.5,1.8,2.2c0.2,0.2,0.3,0.5,0.3,0.8c0.1,0.6-0.1,0.9-0.7,1.1c-0.3,0.1-0.6,0.1-0.9,0.1
			c-1.5,0-3,0.1-4.4,0.1c-0.8,0-1.5-0.3-2-0.8c-0.8-0.7-1.4-1.5-2.2-2.2c-0.3-0.3-0.6-0.6-0.9-0.9c-0.1-0.1-0.2-0.2-0.4-0.3
			c-0.4-0.2-0.7-0.2-1,0.1c-0.4,0.4-0.6,0.9-0.7,1.5c-0.1,0.5-0.1,0.9-0.1,1.4c-0.1,0.6-0.4,1-1,1c-2.1,0.1-4.2,0.2-6.2-0.8
			c-1.8-0.9-3.4-2.1-4.7-3.7c-2.8-3.4-4.9-7.2-6.6-11.2c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.5,0.1-0.8,0.5-0.9c0.2,0,0.4-0.1,0.7-0.1
			c1.4,0,2.8,0,4.2,0c0.7,0,1.2,0.3,1.5,1c0.7,1.8,1.6,3.4,2.6,5.1c0.4,0.7,0.8,1.3,1.5,1.8c0.3,0.2,0.6,0.4,1,0.3
			c0.1,0,0.2-0.1,0.3-0.2c0.3-0.4,0.4-0.9,0.4-1.4c0.2-1.2,0.2-2.4,0.1-3.6c0-0.4-0.1-0.8-0.2-1.2c-0.2-0.7-0.7-1-1.3-1.2
			c-0.1,0-0.3-0.1-0.4-0.2c0.1-0.1,0.2-0.3,0.3-0.4c0.3-0.4,0.7-0.5,1.2-0.6c1.7-0.3,3.4-0.3,5.1-0.1c0.2,0,0.3,0,0.5,0.1
			c0.8,0.2,1,0.4,1.1,1.3c0.1,0.7,0,1.4,0,2.1C281.5,47,281.5,47.3,281.5,47.6C281.5,47.6,281.5,47.6,281.5,47.6z"/>
	</g>
</symbol>
<symbol id="twitter">
	<circle class="st6" cx="419.9" cy="52" r="29.1"/>
	<path class="st3" d="M413.7,59.9c-3.4-0.1-5.5-2.5-6-4.5c0.9,0.2,1.9,0.1,2.8-0.1c0,0,0,0,0.1,0c-1.8-0.4-3.2-1.4-4.2-3
		c-0.6-1-1-2.2-0.9-3.4c0.9,0.5,1.9,0.8,2.9,0.8c-1.4-1-2.3-2.3-2.7-3.9c-0.4-1.6-0.1-3.2,0.7-4.7c3.5,4.1,7.9,6.4,13.3,6.8
		c0-0.3-0.1-0.5-0.1-0.7c-0.2-1.5,0.1-2.9,0.9-4.2c1-1.6,2.5-2.6,4.4-2.9c2.2-0.4,4.1,0.3,5.7,1.8c0.1,0.1,0.2,0.1,0.3,0.1
		c1.3-0.3,2.6-0.8,3.8-1.4c0,0,0.1,0,0.1,0c0,0,0,0,0,0c-0.5,1.5-1.4,2.7-2.8,3.5c1.3-0.1,2.4-0.5,3.6-1c0,0,0,0,0,0
		c-0.2,0.3-0.5,0.7-0.7,1c-0.7,0.8-1.5,1.6-2.4,2.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,1,0,1.9-0.1,2.9c-0.2,2-0.8,3.9-1.7,5.8
		c-0.9,1.9-2,3.6-3.5,5.1c-2.5,2.5-5.4,4.2-8.9,5c-1.2,0.3-2.4,0.4-3.6,0.4c-3.7,0.1-7.2-0.8-10.4-2.8c0,0-0.1-0.1-0.2-0.1
		c2.3,0.2,4.4,0,6.5-0.9C411.7,61.2,412.7,60.7,413.7,59.9z"/>
</symbol>
<symbol id="GooglePlus">
	<circle class="st7" cx="349.7" cy="52" r="29.1"/>
	<g>
		<path class="st1" d="M343.8,49.3c0,0.1,0,0.1,0,0.2c0,1.3,0,4.3,0,4.3s5.6,0,5.9,0c0,0.4-0.5,2.2-2.2,3.3c-1,0.7-2.1,1-3.2,1
			c-0.8,0.1-1.6,0-2.4-0.3c-2.5-0.8-4.3-3-4.6-5.7c-0.1-0.7,0-1.3,0.1-2c0.7-3.2,3.8-5.6,7.3-5.1c1.5,0.2,2.4,0.9,3.2,1.6
			c1.1-1.1,2.1-2.1,3.2-3.2c-0.3-0.2-0.9-0.8-2-1.4c-1.6-0.9-3.4-1.4-5.2-1.4c-0.4,0-0.7,0-1.1,0c-0.6,0-1.2,0.1-1.8,0.3
			c-2.4,0.6-4.4,1.9-5.9,3.8c-1.5,1.8-2.3,4-2.4,6.3c-0.1,1,0,2,0.2,3c0.6,2.7,2.1,4.9,4.3,6.6c1.8,1.3,3.7,2,5.9,2.1
			c1.2,0.1,2.4,0,3.6-0.4c2.2-0.6,4.1-1.7,5.4-3.6c2-2.7,2.5-6.1,1.9-9.3C350.7,49.3,347.3,49.3,343.8,49.3z"/>
		<polygon class="st1" points="367.6,49.4 363.8,49.4 363.8,45.7 363.8,45.6 363.7,45.6 360.9,45.6 360.8,45.6 360.8,45.7 
			360.8,49.4 357,49.4 356.9,49.4 356.9,49.5 356.9,52.3 356.9,52.4 357,52.4 360.8,52.4 360.8,56.2 360.8,56.3 360.9,56.3 
			363.7,56.3 363.8,56.3 363.8,56.2 363.8,52.4 367.6,52.4 367.7,52.4 367.7,52.3 367.7,49.5 367.7,49.4 		"/>
	</g>
</symbol>
<symbol id="Search">
	<path class="st8" d="M515,67.5h-25c-5,0-9-4-9-9v-25c0-5,4-9,9-9h25c5,0,9,4,9,9v25C524,63.5,520,67.5,515,67.5z"/>
	<path class="st1" d="M506.1,54.2c-6.1,0-11-4.9-11-11s4.9-11,11-11c6.1,0,11,4.9,11,11S512.1,54.2,506.1,54.2z M506.1,35.1
		c-4.5,0-8.1,3.7-8.1,8.1s3.7,8.1,8.1,8.1c4.5,0,8.1-3.7,8.1-8.1S510.6,35.1,506.1,35.1z"/>
	<path class="st1" d="M489.8,60.3c-0.4,0-0.7-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2l8.6-8.6c0.6-0.6,1.5-0.6,2,0c0.6,0.6,0.6,1.5,0,2
		l-8.6,8.6C490.5,60.2,490.1,60.3,489.8,60.3z"/>
</symbol>
  
 <svg viewBox="0 0 676 289"> 
   <use xlink:href="#instagram" />
   <use xlink:href="#facebook" />
   <use xlink:href="#ok" />
   <use xlink:href="#vk" />
   <use xlink:href="#GooglePlus" />
   <use xlink:href="#twitter" /> 
   <use xlink:href="#Search" />
   </svg>
 </svg>

相关问题
最新问题