Как изменить размер SVG?

У меня есть такой код:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

Я вырезал большую часть содержимого и заменил его...

в настоящее время создается значок 32 на 32. Что я хотел бы знать, могу ли я использовать этот код для создания значка 100 на 100? Я попытался изменить ширину и высоту, но это не имело значения.

6
html5 javascript svg

1 ответов

на width и height атрибуты элемента SVG определяют только размер области чертежа. Они не масштабируют содержимое, чтобы соответствовать этой области. Для этого Вам также необходимо использовать viewBox, например:

<svg viewBox="0 0 32 32" height="100" width="100" ...>

атрибут viewBox устанавливает систему координат, которая используется для всех дочерних элементов SVG. Затем вы можете использовать ширину и высоту, чтобы растянуть эту систему координат до нужного размера.

вы можете использовать preserveAspectRatio атрибут, чтобы решить, как масштабировать, если пропорции не совпадают.

14