Question

我对<svg>规范感到非常困惑，因为它与<use>标签有关，因为我在网上看到的所有内容似乎都在实现标签上的细微差别。

在css-tricks上<svg> viewBox添加了<symbol>：

<svg style="display: none;">
  <defs>
    <symbol id="basketball" viewBox="0 0 100 100">
      <title>Basketball</title>
      <path d="M28.1,3 ... "/>
    </symbol>
  </defs>
</svg>

然后只使用<symbol>

明确引用id

<svg class="icon-basketball">
  <use xlink:href="#basketball"></use>
</svg>

对于this article也是如此，在this article中，Chris Coyier更是如此，他明确指出<symbol>是一个更好的标签，因为你不需要{ {1}}引用它时。

但是，引用带有viewBox的符号对我来说不起作用，我最终会遇到与this SO question中相同的错误，其结论是您实际上需要This article 1}}引用viewBox时。 jsfiddle甚至提出了一个黑客来处理“内在的svg大小调整”。

确实，在这个简短的svg-sprite /代码段中，您可以看到只有一个viewBox，如果我将视图框添加到<symbol>引用中，它的大小正确，没有任何空格。然而，删除了视图框后，顶部和底部都有很大的“边距”。

<symbol>

所以我对<svg>的错误是我定义<link href="https://unpkg.com/tachyons@4.9.0/css/tachyons.min.css" rel="stylesheet"/> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap" id="zap"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /></symbol></defs></svg> <div class="tc">  <svg class="outline w3 bg-red"> <use xlink:href="#zap"></use> </svg>  <svg class="outline w3 bg-green" viewBox="0 0 24 24"> <use class="black" xlink:href="#zap"></use> </svg> </div>的方式，目前正在通过webpack上的STRING_AGG string concatenation function生成。或者最近有<use>被外部引用的方式发生了变化吗？

谢谢！

Answer 1

在你提到的article中，Chris Coyier使用symbol在精灵中存储图标。

精灵中的每个symbol都可以拥有自己的viewBox，其中包含单独的参数值，您可以另外按比例缩放和定位每个图标。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

</svg>

在你的情况下，当使用<use>时，正如罗伯特·朗森写道：

在一个实例中它具有大小信息，而在另一个实例中它没有。

在嵌套的svg中，还有一个额外的缩放因此，如果您希望两个克隆的大小相同，请将svg viewBox添加到具有相同参数的第二个实例viewBox =" 0 0 24 24 "

<link href="https://unpkg.com/tachyons@4.9.0/css/tachyons.min.css" rel="stylesheet"/>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap" id="zap"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /></symbol></defs></svg>

<div class="tc">


	<!-- svg is the correct size -->
	<svg class="outline w3 bg-red" viewBox="0 0 24 24">
		<use xlink:href="#zap"></use>
	</svg>
	
	<!-- svg is the correct size -->
	<svg class="outline w3 bg-green"  viewBox="0 0 24 24">
		<use class="black" xlink:href="#zap"></use>
	</svg>
	

		
</div>

<使用> svg的正确方法是什么？

1 个答案: