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

Question

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

<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? Я попытался изменить ширину и высоту, но это не имело никакого значения.

Answer 1

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

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

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

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