如何自动将内联SVG定位到NAVBAR中

Question

我用inkscape绘制了很少的矢量图。

现在，我正在尝试将这些SVG定位在垂直的Nevbar中。我想将每个插图放置在相应的位置（使用Inline 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. 您的字体可感知图标使用隐式字体大小为14px。由于SVG图标不是文本，因此我们不能使用font-size，而是使用显式width和height
4. 您的:hover效果使用文本缩放，如上所述，它仅对基于字体的图标有影响。由于您的图标为SVG，因此最好使用通用transform: scale(value)规则，该规则在字体和图标上都可以使用。请注意，我们想扩展图标，而不是锚点，因此我更改了用于<i>元素而不是<a>元素的规则。
5. 要使SVG图标具有正确的比例中心，我们需要使用transform-origin规则进行一些播放。

随着所有更改的代码，您的代码应该看起来像这样的叉子codepen

Answer 2

为了清楚起见，我简化了您的示例：

这就是我的方式：我会在{0,0}点中绘制中心的符号。符号viewBox的宽度和高度为300个单元，与.first-icon viewBox

的宽度和高度相同

svg.first-icon{width:90vh;border:1px solid}

<svg viewBox="0 0 300 300" class="first-icon">
  <use href="#my-smiley"/>
</svg>
<svg>
  <symbol viewBox="-150 -150 300 300" id="my-smiley">
  <g stroke="#f7931e">
    <circle  r="50" fill="gray" stroke-width=".004"/>
    <g transform="translate(-145,-80)">
    <path d="M144.59 64.536l-10.606 4.22-2.537 11.128-7.29-8.783-11.368 1.027 6.1-9.648-4.489-10.494 11.06 2.82 8.594-7.511.735 11.39zM184.32 63.824l-10.606 4.22-2.537 11.128-7.29-8.783-11.368 1.027 6.1-9.648-4.489-10.494 11.06 2.82 8.594-7.511.735 11.39z" fill="#f7931e" stroke-width=".002"/>
    <path fill="#ffd5d5" stroke-width=".004" d="M122.46 102.72h48.381v5.292H122.46z"/>
  </g>
  </g>
  </symbol>
</svg>

如果愿意，则可以使<symbol>较小，但是您需要给<use> A width A height，x和y属性：

svg:first-of-type{width:90vh; border:1px solid;}

<svg viewBox="0 0 300 300" class="first-icon">
  <use x="100" y="100" width="100" height="100" href="#my-smiley"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="-50 -50 100 100" id="my-smiley" class="my-smiley">
  <g id="kk" stroke="#f7931e">
    <circle  r="50" fill="gray" stroke-width=".004"/>
    <g transform="translate(-145,-80)">
    <path d="M144.59 64.536l-10.606 4.22-2.537 11.128-7.29-8.783-11.368 1.027 6.1-9.648-4.489-10.494 11.06 2.82 8.594-7.511.735 11.39zM184.32 63.824l-10.606 4.22-2.537 11.128-7.29-8.783-11.368 1.027 6.1-9.648-4.489-10.494 11.06 2.82 8.594-7.511.735 11.39z" fill="#f7931e" stroke-width=".002"/>
    <path fill="#ffd5d5" stroke-width=".004" d="M122.46 102.72h48.381v5.292H122.46z"/>
  </g>
  </g>
  </symbol>
</svg>