Silakan lihat cuplikannya di bawah ini. Saya memiliki ikon svg yang lebar dan tingginya masing-masing saya atur ke 80px, namun, ikon svg itu sendiri tidak memenuhi ukuran penuh itu. Bagaimana saya bisa menyesuaikan ukuran ikon svg individual dengan benar? Terima kasih!

svg {
  background: pink
}
   <svg width="80" height="80">
     <rect width="24" height="24" fill="none" rx="0" ry="0"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM19.8 12C19.8 16.3078 16.3078 19.8 12 19.8C7.69218 19.8 4.2 16.3078 4.2 12C4.2 7.69218 7.69218 4.2 12 4.2C16.3078 4.2 19.8 7.69218 19.8 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.94968 15.7659 8.1876 14 7.41604V9.12734C14.9067 9.75982 15.5 10.8106 15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.8106 9.09326 9.75982 10 9.12734V7.41604C8.2341 8.1876 7 9.94968 7 12C7 14.7614 9.23858 17 12 17ZM12 6C11.5582 6 11.2 6.35817 11.2 6.8V9.2C11.2 9.64183 11.5582 10 12 10C12.4418 10 12.8 9.64183 12.8 9.2V6.8C12.8 6.35817 12.4418 6 12 6Z" fill="#303131"/>
   </svg>
0
Jimmy 23 April 2020, 03:48

1 menjawab

Jawaban Terbaik

Saya tidak yakin berapa proporsi asli SVG Anda, tetapi jika Anda memasukkannya ke dua parameter terakhir dari atribut viewBox pada tag <svg>, itu akan memberikan sesuatu yang familiar untuk ditingkatkan 80/80 piksel dari!

(Saya sudah menebak 24/24)

Dari MDN:

Nilai atribut viewBox adalah daftar empat angka: min-x, min-y, width dan height. Angka yang dipisahkan oleh spasi putih dan/atau koma, yang menentukan persegi panjang di ruang pengguna yang dipetakan ke batas area pandang yang dibuat untuk elemen SVG terkait (bukan area pandang browser).

(Tekankan milikku)

svg {
  background: pink
}
<svg width="80" height="80" viewBox="0 0 24 24">
    <rect width="24" height="24" fill="none" rx="0" ry="0"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM19.8 12C19.8 16.3078 16.3078 19.8 12 19.8C7.69218 19.8 4.2 16.3078 4.2 12C4.2 7.69218 7.69218 4.2 12 4.2C16.3078 4.2 19.8 7.69218 19.8 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.94968 15.7659 8.1876 14 7.41604V9.12734C14.9067 9.75982 15.5 10.8106 15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.8106 9.09326 9.75982 10 9.12734V7.41604C8.2341 8.1876 7 9.94968 7 12C7 14.7614 9.23858 17 12 17ZM12 6C11.5582 6 11.2 6.35817 11.2 6.8V9.2C11.2 9.64183 11.5582 10 12 10C12.4418 10 12.8 9.64183 12.8 9.2V6.8C12.8 6.35817 12.4418 6 12 6Z" fill="#303131"/>
</svg>
2
Cameron Hurd 23 April 2020, 01:13