Как автоматически позиционировать встроенные svgs в navbar?

Question

Я нарисовал несколько векторных иллюстраций с помощью inkscape.

Теперь я пытаюсь расположить эти svgs в вертикальной панели навигации.Я бы хотел разместить каждую иллюстрацию в соответствующем месте (используя встроенный 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>

Это мой кодовый код ,

Может кто-нибудь предложить правильный путь?и продемонстрировать?

Любой пример будет великолепен!

Answer 1

Для ясности я упростил ваш пример:

Вот как я бы это сделал: я бы нарисовал символ с центром в точке {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>

Answer 2

Есть несколько шагов, чтобы добиться эффекта, который вы получаете с помощью удивительных шрифтов иконок и сделайте их своими собственными иконками 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.

Со всеми этими изменениями ваш код должен выглядеть примерно так: этот раздвоенный код *