html - ing svg 的正确方法是什么？

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>是更好的标签，因为您不需要 viewBox引用它时。

但是，引用带有 viewBox 的符号对我不起作用，我最终遇到与 this SO question 中相同的错误，得出的结论是您实际上确实需要 viewBox引用 <symbol> 时. This article甚至提出了一个 hack 来处理“固有 svg 大小调整”。

确实，在这个短片中 jsfiddle/snippet，你可以看到一个<symbol> ，如果我将 View 框添加到 <svg> 中引用它的大小正确，没有任何空格。然而，在移除 viewbox 后，顶部和底部有很大的“边距”。

<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 always oversized -->
	<svg class="outline w3 bg-red">
		<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>

那么我对 <use> 有什么误解呢？这是我定义 <symbol> 的方式吗？ ，目前正在通过 svg-sprite 生成在网络包上。或者最近有没有改变方式<svg> s 是外部引用的吗？

谢谢!

Answer 1

在article你指的是，Chris Coyier 使用了 symbol在 Sprite 中存储图标。

每个symbol在 Sprite 中可以有自己的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> 时，正如罗​​伯特朗森所写:

in one instance it has size information, in the other it does not.

在嵌套的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>