html - 如何将svg放在跨度内并获取跨度以包围svg？

如何将svg放在范围内并使范围将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>

最佳答案

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

span {
    display: inline-block;
}

https://jsfiddle.net/4maotyv4/