Question

我用墨迹画了一些矢量插图。

现在，我正在尝试将这些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图标上：

我建议将您的viewBox属性设置为仅包含图形而不包含任何填充的边框，并将结果图标的位置保留为CSS样式。
由于您还有其他用<a>和<i>标签包裹的图标，因此出于一致性考虑，您可以对svg图标执行相同的操作。
您的超棒字体图标使用14px的隐式字体大小。由于svg图标不是文本，因此我们不能使用font-size，而是使用显式的width和height
您的:hover效果使用文本缩放，并且如上所述，它只会对基于字体的图标产生影响。由于您的图标是svg，最好使用通用的transform: scale(value)规则，该规则在字体和图标上均适用。请注意，我们要缩放图标，而不是锚，因此我更改了规则，使其适用于<i>元素而不是<a>元素。
要使svg图标具有正确的比例中心，我们需要使用transform-origin规则。

所有更改都会使您的代码看起来像this forked 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>一个width一个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>

如何自动将内嵌svg定位到导航栏中？

2 个答案: