Tôi có thể thay đổi kích thước SVG bằng cách nào?

Question

tôi có mã như thế này:

<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> 

tôi cắt ra hầu hết các nội dung và thay thế nó bằng ...

này hiện đang tạo ra một 32 bởi 32 biểu tượng. Điều tôi muốn biết là tôi có thể sử dụng mã này để tạo biểu tượng 100 x 100 không? Tôi đã thử thay đổi chiều rộng và chiều cao nhưng nó không có sự khác biệt.

Answer 1

Các thuộc tính width và height trên phần tử SVG chỉ xác định kích thước của vùng vẽ. Họ không quy mô nội dung để phù hợp với khu vực đó. Cho rằng, bạn cũng cần phải sử dụng thuộc tính viewBox, như vậy:

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

Thuộc tính viewBox thiết lập hệ tọa độ được sử dụng cho tất cả các phần tử con của SVG. Sau đó, bạn có thể sử dụng chiều rộng và chiều cao để kéo dài hệ tọa độ này đến kích thước mong muốn.

Bạn có thể sử dụng thuộc tính preserveAspectRatio để quyết định cách chia tỷ lệ nếu tỷ lệ khung hình không khớp.