如何将 svg 放在 span 内并让 span 包围 svg？答案

【问题标题】：How can I put an svg inside of a span and get the span to envelop the svg?如何将 svg 放在 span 内并让 span 包围 svg？
【发布时间】：2016-05-30 20:01:49
【问题描述】：

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

【问题讨论】：

为什么是 span 而不是 div？
因为我需要结果并排，而不是堆叠

标签： html css svg

【解决方案1】：

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

span {
    display: inline-block;
}

https://jsfiddle.net/4maotyv4/

【讨论】：

是的。直到现在我还没有意识到内联块。非常感谢。
HTML 元素具有人们忘记的默认值。欢迎你:)

【解决方案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>

【讨论】：

完美。我不知道内联块。非常感谢。