如何將svg放在跨度內並獲取跨度以包圍svg？

Question

如何將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>

Answer 1

添加CSS規則以使display: inline的跨度默認為display: inline-block 。

span {
    display: inline-block;
}

https://jsfiddle.net/4maotyv4/

Answer 2

我建議以下解決方案

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