假设某人有一张如下所示的精灵表：

<svg style="display: none;">
  <symbol viewBox="0 0 32 32" id="square-thing" class="inner">
    <path d="..."/>
  </symbol>
  <symbol viewBox="0 0 64 32" id="wide-thing" class="inner">
    <path d="..."/>
  </symbol>
  <symbol viewBox="0 0 32 128" id="tall-thing" class="inner">
    <path d="..."/>
  </symbol>
  <!-- ...more things of all shapes and sizes! -->
</svg>

此Sprite表在文档中引用：

<svg class="outer"><use xlink:href="#thing1" /></svg>
<svg class="outer"><use xlink:href="#thing2" /></svg>
<svg class="outer"><use xlink:href="#thing3" /></svg>

呈现时，每个符号在150px元素和<a>元素之间至少有一些空格，如下所示：

Chrome用户代理似乎将150pxSVG元素的宽度设置为150px，高度设置为<a href="#">An Icon - <svg class="outer"><use xlink:href="#thing" /></svg></a>

我希望150pxSVG在这里自动调整自身大小，以匹配.inner它位于内部，<a>元素周围没有额外的空格。

如何使150px元素将其自身收缩包装为<a>的大小，并满足以下要求：

• 没有在150px元素上设置显式的width和height属性。引用的符号可能具有不可预测的ViewBox尺寸。
• 无JavaScript.

我已经尝试了过多的基于CSS的方法，但都无济于事。

一个工作的小提琴可以在这里找到一个互动演示：https：//jsfiddle.net/lleber/7z8lmy9k/

谢谢你的见解。

顺晟科技：