1
下面是一个SVG图标显示在蓝色DIV中的简单示例。首先,CSS:如何强制SVG图标缩放?
div.box {
width: 72px;
height: 72px;
background-color: blue;
}
svg.icon {
width: 72px;
height: 72px;
color: white;
fill: currentColor;
}
...现在的HTML:
<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>
<div class="box">
<svg class="icon" viewBox="0 0 72 72"><use xlink:href="#box-icon"></use></svg>
</div>
</body>
见https://jsfiddle.net/b9fxvu7k/
注意,DIV,图标和图标的视框中都大小以72个像素。但是,无论我为DIV,图标和视图框指定的大小,浏览器都坚持将图标呈现为24像素。我需要将SVG图标放大到其容器的大小。有没有人看到缺少的东西?或者,我指定硬编码为24x24的SVG路径?
谢谢,哈桑!我发现CSS解决方案还需要“transform-origin:0 0”以防止图标移出蓝框。正如你所说,它在IE上完全不起作用。但是“g”元素上的transform属性完美运行,即使在IE(至少IE 11)上也是如此。 –