文章/答案/技术大牛

发布

社区首页 >问答首页 >如何强制SVG图标进行缩放？

问如何强制SVG图标进行缩放？
EN

Stack Overflow用户

提问于 2017-05-31 21:11:36

回答 1查看 1.4K关注 0票数 2

下面是一个SVG图标在蓝色DIV中显示的简单例子。首先，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像素。但是浏览器坚持将图标呈现为24个像素，不管我为DIV、图标和viewbox指定了多大的大小。我需要SVG图标来扩展到它的容器的大小。有人看到什么不见了吗？或者，我指定的SVG路径是否硬编码到24x24？

html

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-05-31 21:28:36

可以使用g属性向transform添加缩放因子，如下所示：

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

您还可以在CSS中实现相同的结果：

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

但是CSS方法显然不适用于IE。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44294744

复制

相似问题

问如何强制SVG图标进行缩放？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制SVG图标进行缩放？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制SVG图标进行缩放？
EN