如何强制 SVG 图标缩放?
Posted
技术标签:
【中文标题】如何强制 SVG 图标缩放?【英文标题】:How to force SVG icon to scale? 【发布时间】:2017-11-01 20:20:02 【问题描述】:下面是一个以蓝色 DIV 显示的 SVG 图标的简单示例。首先,CSS:
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 图标放大到其容器的大小。有没有人看到缺少什么?或者,我指定的 SVG 路径是否硬编码为 24x24?
【问题讨论】:
【参考方案1】:您可以使用transform
属性为您的g
添加比例因子,如下所示:
<g transform="scale(3)" ...
您也可以在 CSS 中实现相同的结果:
#button-icon
transform: scale(3);
但是 CSS 方法显然在 IE 中不起作用。
【讨论】:
谢谢,哈桑!我发现 CSS 解决方案还需要“transform-origin: 0 0”来防止图标移动到蓝框之外。正如你所说,它在 IE 上根本不起作用。但是“g”元素上的 transform 属性运行良好,即使在 IE(至少 IE 11)上也是如此。以上是关于如何强制 SVG 图标缩放?的主要内容,如果未能解决你的问题,请参考以下文章