如何让<svg>的大小等于<path>的大小，而不修改<path>？

Question

目前，svg的宽度和高度为48px，path为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>

​

Answer 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>

​