如何将一个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>

- Greg Clinton

---

为什么使用<span>而不是<div>？ - bumbeishvili

因为我需要结果并排显示，而不是堆叠显示。 - Greg Clinton

Answer 1

添加一个CSS规则，将默认为display: inline的元素更改为display: inline-block。

span {
    display: inline-block;
}

https://jsfiddle.net/4maotyv4/

- aifrim

---

是的。直到现在我还不知道inline-block。非常感谢。 - Greg Clinton

HTML元素有人们容易忘记的默认值。您可以放心使用:) - aifrim

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>

- gevorg

---

太好了。我之前不知道有inline-block这个属性。非常感谢你。 - Greg Clinton