html - 如何将 svg 放入 span 中并让 span 包围 svg？

Question

如何将 svg 放入 span 中并让 span 包围 svg？例如，这里我想要并排放置两个灰色背景的黑色圆圈。我只是无法让它工作。

<span style="background: gray">               
    <svg height="100" width="100" style="display: block">
        <circle cx="50" cy="50" r="40" ></circle>
    </svg>
</span>        

<span style="background: gray">               
    <svg height="100" width="100" style="display: block">
        <circle cx="50" cy="50" r="40" ></circle>
    </svg>
</span>

Answer 1

添加 CSS 规则，使 display: inline 的 span 默认为 display: inline-block。

span {
    display: inline-block;
}

https://jsfiddle.net/4maotyv4/