主页 / 问题 / 623591
Accepted
Shperung
Asked:2020-02-05 17:24:58 +0000 UTC2020-02-05 17:24:58 +0000 UTC

webpack 中的 SVG 精灵图

  • 772

我正在使用 webpack-svgstore-plugin。实现了我正在做的精灵。如何连接精灵中的一个元素。我在插件示例中进行了连接，但不起作用

完整示例在这里 

 <svg class="svg-icon">
    <use xlink:href="#iconarrow-big-right"></use>
 </svg>

svg

1 个回答

  1. Best Answer

    1. 第一个重大错误——你相信精灵的神奇力量。就像，你只需要将一堆 SVG 文件放到一个文件夹中，安装 webpack，你就会很高兴——一切都很好，页面上的所有图标。但是没有任何效果，就像您的情况一样。

    2. 因为你需要了解这一切是如何运作的。采取不同的方法，将您自己手动制作的 sprite 中的至少几个图标手动插入到 HTML 页面中。
      否则，将会有很多问题——为什么图标不可见，为什么图像被裁剪，尺寸不合适，为什么无法设置图标样式。

    3. 我查看了您的带有图标文件的文件夹，给我的印象是绝对没有选择图标，他们勾勒出他们找到的所有东西。

    4. 理想情况下，图标应具有相同的 viewBox 属性，但您的范围为 16 到 425。

    <!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>test</title>
 </head> 
<body>
<div id="container">
<!--  начало спрайта -->
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	

<symbol id="child" viewBox="0 0 425 425">
	<path d="M119.3,173.5c29.6,0,53.6-24,53.6-53.7c0-18.5,6.5-35.4-7.8-45c-8.5-5.8-46.1-8.5-57.2-8.5c-13.2,0-30.4,10.8-39.7,18.7
		c-11.6,9.8-2.5,18.5-2.5,34.9C65.7,149.5,89.7,173.5,119.3,173.5z M120.5,161c-21.7,0-39.2-17.9-39.2-39.9c0-2.2,0.3-4.3,0.6-6.5
		c9.9-1.8,16.5,1.5,16.5,1.5l16.5-8c0,0-8.4,12.1-0.8,8c16.7-5.6,35.4-3.3,45-1.4c0.3,2.1,0.6,4.2,0.6,6.4
		C159.8,143.2,142.2,161,120.5,161z"/>
	<path d="M241.8,178.7c-3.2-28.6,10.5-45.9,15.8-51.4c4.9,29.6,30.4,52.3,61.4,52.3c29.3,0,53.9-20.4,60.5-47.8
		c5.1,8.9,13.6,27.2,11.5,46.8c52.1-0.4,26.4-59.9-10-66.4c-0.3-3.1-0.6-6.1-1.2-9c-2.1-18.8-19-57-67.2-55.9
		c-41.6,1-50.7,32.3-52.8,51.4c-1.5,4.7-2.4,9.6-2.7,14.7C202.8,122.9,208.7,177.8,241.8,178.7z M319,162.1
		c-24.4,0-44.1-19.6-44.7-43.8c8.9-3.2,15.4-18.6,15.4-18.6s5.3,1.8,5.3,19.2c9.2,3.2,25.2-27,25.2-27v23.8
		c10.2,2.8,42.2-0.9,42.2-0.9l1.2,1c0,0.5,0.2,1,0.2,1.6C363.7,141.9,343.7,162.1,319,162.1z"/>
	<polygon points="391,268.1 415.9,261.9 356.3,181.3 332,181.3 332,181.3 283.7,181.3 219.3,258.9 157,182.3 86.1,182.3 2.9,273.1 
		27.5,279.7 80.6,234.4 80.6,322.3 91.2,322.3 91.2,389.1 84.4,389.1 84.4,396.9 115.3,396.9 115.3,322.3 126.9,322.3 126.9,396.9 
		157.6,396.9 157.6,389.1 150.9,389.1 150.9,322.3 163.9,322.3 163.9,236 206.3,279.7 223.7,275.4 233.3,277.7 281.4,222.7 
		284.1,244.5 239.5,321.3 291,321.3 291,388.1 284.2,388.1 284.2,395.9 315,395.9 315,321.3 326.6,321.3 326.6,395.9 357.4,395.9 
		357.4,388.1 350.6,388.1 350.6,321.3 390.6,321.3 351.2,244.5 353.4,217.7 	"/>
</symbol>
   <symbol id="basket" viewBox="0 0 425 425">
	 <path d="M423.8,183.1c0,0,0-0.1,0-0.1c0-0.5,0-0.9-0.1-1.4c0-0.3-0.1-0.5-0.1-0.8c0-0.3-0.1-0.5-0.1-0.8c-1.4-8.6-8.8-15.3-17.8-16
		H21.2c-10.9,0-19.8,8.6-19.8,19.2s8.9,19.2,19.8,19.2h17.5L81.2,367l0.1,0c2.1,8.3,9.9,14.6,19.1,14.6l0,0c0,0,0.1,0,0.1,0v0h224.3
		c9.3,0,17-6.2,19.1-14.6l0.1,0l42.4-164.6H404C414.9,202.4,423.8,193.8,423.8,183.1C423.8,183.2,423.8,183.2,423.8,183.1
		C423.8,183.1,423.8,183.1,423.8,183.1z M153.2,324c0,10.6-8.9,19.2-19.8,19.2s-19.8-8.6-19.8-19.2V221.6c0-10.6,8.9-19.2,19.8-19.2
		s19.8,8.6,19.8,19.2V324z M232.4,324c0,10.6-8.9,19.2-19.8,19.2c-10.9,0-19.8-8.6-19.8-19.2V221.6c0-10.6,8.9-19.2,19.8-19.2
		c10.9,0,19.8,8.6,19.8,19.2V324z M311.6,324c0,10.6-8.9,19.2-19.8,19.2c-10.9,0-19.8-8.6-19.8-19.2V221.6c0-10.6,8.9-19.2,19.8-19.2
		c10.9,0,19.8,8.6,19.8,19.2V324z M234.9,64.6l43.8,80.2h44.8l-53.6-98.2l-0.1,0C266.6,40.4,260,36,252.2,36
		c-10.9,0-19.8,8.6-19.8,19.2C232.4,58.6,233.4,61.8,234.9,64.6L234.9,64.6z M190.3,64.6l-0.1-0.1c1.6-2.8,2.6-5.9,2.6-9.3
		c0-10.6-8.9-19.2-19.8-19.2c-7.8,0-14.4,4.4-17.6,10.7l0,0l-53.6,98.2h44.8L190.3,64.6z"/>
   </symbol>
       <symbol id="clock" viewBox="0 0 425 425">
         <path d="M69.605,70.754c-78.789,78.199-78.789,204.997,0,283.17c78.785,78.171,206.532,78.203,285.292,0
	c78.787-78.205,78.787-204.997,0-283.17C276.109-7.448,148.363-7.448,69.605,70.754z M319.42,224.851H211.886
	c-0.191,0-0.352,0.106-0.541,0.106c-7.456,0-13.508-6.005-13.508-13.41V77.352c0-7.401,6.053-13.41,13.508-13.41
	c7.458,0,13.51,6.009,13.51,13.41v120.681h94.565c7.458,0,13.51,6.005,13.51,13.406C332.93,218.842,326.878,224.851,319.42,224.851z
	"/>
	  </symbol>
	   </svg>
	   <!--  конец спрайта -->
 </div>  

	 <div id="s1">
	    <svg> 
	      <use xlink:href="#basket"></use>
    	</svg>
	</div>
       <div id="s2">
	  		<svg> 
		     <use xlink:href="#child"></use>
		    </svg>
       </div>
	     <div id="s3">
	  		<svg> 
		     <use xlink:href="#clock"></use>
		    </svg>
         </div>
     </body>
  </html>

    有几种方法可以形成精灵：将其放在库部分<defs> ---- </defs>并用组标签包裹每个图标，<g id="child"> ....</g> 或者第二种方法 - 通过将图标代码放在成对的标签<symbol id="child">中，如上例所示。

    这样做主要是为了确保图标位于一个大文件中，并且直到它们被<use> Load sprite to HTML 命令以不同方式调用时才可见。在这里阅读更多。还有一个技巧，为了不奇怪为什么图标中有如此大的文本缩进，请提前查看图像相对于 SVG 文件中的视口的位置。为此，您可以临时在文件头中添加一个框架style="1px solid red;"，在调整图像相对于视口的位置后，可以删除该框架。如何在 SVG 文件中定位图标 -此处

    • 4

相关问题