如何在不修改 <path> 的情况下使 <svg> 的大小等于 <path> 的大小？答案

【问题标题】：How to make size of <svg> equal to size of <path> without modifying <path>?如何在不修改 <path> 的情况下使 <svg> 的大小等于 <path> 的大小？
【发布时间】：2021-06-10 17:53:48
【问题描述】：

目前，svg 的宽高为 48px，路径为 40px。如何使它们的大小相等？

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 48px;
    height: 48px;
    border: 1px solid red;
}

.container svg {
    display: block;
    height: 100%;
    width: 100%;
}

<div class="container">
    <svg viewBox="0 0 24 24" fill="black" width="1em" height="1em">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path>
    </svg>
</div>

【问题讨论】：

标签： html css svg icons

【解决方案1】：

更改svg 元素中的viewBox 属性

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 48px;
    height: 48px;
    border: 1px solid red;
}

.container svg {
    display: block;
    height: 100%;
    width: 100%;
}

<div class="container">
    <svg viewBox="2 2 20 20" fill="black" width="1em" height="1em">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path>
    </svg>
</div>

【讨论】：