在 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 像素 x 24 像素，因为您可以在宽度、高度和 viewBox 属性中看到这些尺寸。

我想将尺寸更改为 32 x 32 像素。

Answer 1

最简单的方法是删除宽度/高度并让 viewBox 接管，然后使用基于容器或 css 规则的相对大小，针对 svg 的id，但您也可以只修改宽度/高度属性值：

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