html - 在 html 和 css 中重新调整材料设计图标大小的最简单方法是什么?
问题描述
例如我有这个 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 像素。
解决方案
最简单的方法是删除宽度/高度并让 viewBox 接管,然后使用基于容器的相对大小或针对 svg 的 css 规则,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>
推荐阅读
- ms-word - Office 的 Javascript API - 带有锚点的内联图像
- amazon-web-services - 无法从 ec2 linux 实例连接到特定域
- java - 与 spring 数据 jdbc 一起使用时,PagingAndSortingRepository 方法会引发错误
- python - 可以从现有日期时间实例创建的自定义日期时间子类?
- java - 使用三刺的处理方法
- corda - 如何限制观察者节点进行任何交易
- php - 将 php5 升级到 php7 后 AJAX 无法正常工作
- firebase - Angular CLI 支持子域反向代理
- scala - GetComponent[?, ProjectedExtent]: (? => TilerKeyMethods[K, K2]) 和 SpatialComponent: Boundable 是什么意思?
- xml - 我有一个输入文档,我只想提取前缀为 p 、 T 和 C 的元素