关于html：如何强制SVG图标缩放？


How to force SVG icon to scale?

以下是一个以蓝色DIV显示的SVG图标的简单示例。 首先，CSS：

1
2
3
4
5
6
7
8
9
10
11
12
div.box {
    width: 72px;
    height: 72px;
    background-color: blue;
}

svg.icon {
    width: 72px;
    height: 72px;
    color: white;
    fill: currentColor;
}

...现在是HTML：

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <g id="box-icon"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"></path></g>
        </defs>
    </svg>


   
        <svg class="icon" viewBox="0 0 72 72"><use xlink:href="#box-icon"></use></svg>
   
</body>

参见https://jsfiddle.net/b9fxvu7k/

请注意，DIV，图标和图标的视图框的大小均为72像素。 但是，无论我为DIV，图标和视图框指定的大小，浏览器都坚持将图标渲染为24像素。 我需要SVG图标以放大到其容器的大小。 有人看到遗漏了什么吗？ 还是我指定的SVG路径硬编码为24x24？

您可以使用transform属性将比例因子添加到g中，如下所示：

1
<g transform="scale(3)" ...

您还可以在CSS中获得相同的结果：

1
2
3
#button-icon {
  transform: scale(3);
}

但是CSS方法显然在IE中不起作用。

相关讨论