我可以通过没有“ viewBox”属性的CSS来调整材质设计SVG图标的大小吗?

时间:2019-07-25 05:33:24

标签: html css svg

这是材料设计图标“帐户”的svg代码:

<svg viewBox="0 0 24 24">
    <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>

enter image description here

请注意:https://materialdesignicons.com/中的大多数图标都是高质量的svg,每个svg画布仅包含一个路径。

我阅读了有关viewBox的一些解释,但不了解它的作用。 是否可以仅通过不带有“ viewBox”属性的CSS来调整图标的大小?

不正确的尺寸示例(图标不是64px x 64px):

svg {
  width: 64px;
  height: 64px;
}
<svg>
    <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>

0 个答案:

没有答案