Блог

Главная - Вопросы по программированию - Как сделать несколько SVGS встроенными?

Как сделать несколько SVGS встроенными?

#html #svg #inline

#HTML #svg #встроенный

Вопрос:

У меня есть исходный код для нескольких SVG-файлов в моем коде, но по какой-то причине они не будут встроены, хотя на рисунках Google, в которых они были сделаны, они были в одной и той же строке.

 The JSFiddle is https://jsfiddle.net/53raccoon/zrym4h95/3/

Комментарии:

1. В вашем fiddle у вас есть 2 видимых элемента svg, хотя, чтобы увидеть второй, вам нужно прокрутить tp. Хорошей идеей было бы заменить чрезвычайно длинный путь текстом. Также, если вы хотите видеть элементы svg в одной строке, добавьте ширину, подобную этой: svg{width:300px;border:1px solid} Добавлена граница, чтобы вы могли видеть размер элементов svg и пробел вокруг зеленой фигуры.

2. @enxaneta не помогает

Ответ №1:

У вас возникли две проблемы:

  1. По умолчанию SVG-файлы имеют ширину «100%». Если вы хотите, чтобы они были встроенными, вы должны придать им меньшую ширину. Например. «40%»

     a {
  display: inline-block;
  width: 40%;
}

  2. Другая проблема заключалась в том, что ваши viewBox значения были слишком большими. Ваши кнопки были намного меньше, чем указано в окне просмотра. Например, первое окно просмотра

     viewBox="0.0 0.0 960.0 720.0"

    должно быть больше похоже

     viewBox="184 27 203 76"

Обновленный fiddle