html - 如何自动将内联 svgs 定位到导航栏中？

Question

我用 inkscape 画了一些矢量图。

现在我正在尝试将这些 svg 定位到垂直导航栏中。 我想将每个插图定位到相应的位置(使用内联 SVG)。 我读过css-tricks: scale-svg这对我很有用， 但希望避免为每个图示图标手动插入位置(这似乎是错误的!)，

<li>
      <!-- I don't think this is the correct approach, how should i do it? -->
      <svg viewBox="-150 -150 300 300" class="first-icon">
          <use href="#my-smiley"/>
      </svg>
</li>

这是我的 codepen ,

有人可以建议一个正确的方法吗？并演示？

任何例子都很棒!

Answer 1

有几个步骤可以实现您使用超赞字体图标并将它们放在您自己手工制作的 svg 图标上的效果:

1. 我建议您使用 viewBox属性设置为仅包含您的图形而没有任何填充的边界框，并将生成的图标的定位留给 css 样式。
2. 因为你有其他图标包裹在 <a> 中和 <i>标签，为了保持一致性，您可以对 svg 图标执行相同的操作。
3. 您的超棒字体图标使用 14 像素的隐式字体大小。由于 svg 图标不是文本，我们不能使用 font-size ，而是我们将使用明确的 width和 height
4. 你的 :hover effect 使用文本缩放，如上所示，它只会对基于字体的图标产生影响。由于您的图标是 svg，因此最好使用通用 transform: scale(value)规则，它既适用于字体又适用于图标。请注意，我们想要缩放图标，而不是 anchor ，所以我更改了规则以处理 <i>元素而不是 <a>元素。
5. 为了让 svg 图标有正确的比例中心，我们需要玩一下 transform-origin规则。

经过所有更改后，您的代码应该类似于 this forked codepen。