Какой самый простой способ изменить размер значка дизайна материала в HTML и CSS?

Question

Например, у меня есть html и css:

  <svg 
    id = "menu_top"
    onClick = {this.clickHandler}  
    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>

Здесь значок четко установлен на 24 px на 24 px, так как вы можете видеть эти размеры как в свойствах width, height, так и viewBox.

Я хотел бы изменить размеры на 32px на 32px.

Answer 1

Проще всего удалить ширину / высоту и просто позволить viewBox вступить во владение, затем использовать относительное изменение размера на основе правила контейнера или CSS, нацеленного на id svg, но вы также можете просто изменить значения атрибута ширины / высоты:

#menu_top {
  width: 32px;
}

/* for the second option */
svg {
  width: 100%;
}

.icon-menu_top {
  display: block;
  width: 64px;
}

  <!-- just modify the width/height attributes directly, leave the viewBox as is -->
  <svg 
    id = "menu_top"
    onClick = {this.clickHandler}  
    xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
    <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
  

  <!-- define the size via css directly on the svg element -->
  <svg 
    id = "menu_top"
    onClick = {this.clickHandler}  
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg>
  
  <!-- or wrap it in a container of desired size and remove id -->
  <i class="icon-menu_top">
    <svg
    onClick = {this.clickHandler}  
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </i>