在 SVG 之间添加空格答案

【问题标题】：Add Blank Space between SVGs在 SVG 之间添加空格
【发布时间】：2017-12-08 22:29:45
【问题描述】：

我想在一个 div 的水平行中显示 3 个 SVG，中间有 5px 的空白空间，根本不改变 SVG。

Padding 和 Margin 不起作用，至少对于 svg 不可靠，所以我还能做些什么来实现这一点？

【问题讨论】：

将svg 包裹在<div> 中并对其应用css。
我怎么没想到！我尝试在 svg 之间放置 div，但这很混乱。我会接受您的评论作为答案。

【解决方案1】：

你可以使用letter-spacing:吗？这是您可能正在寻找的一个示例。

 div{
 text-align:center;
 letter-spacing:-10px;
 }

<div>
<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="RED" />
   Sorry, your browser does not support inline SVG.
</svg> 

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="GREEN" />
   Sorry, your browser does not support inline SVG.
</svg> 

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="BLUE" />
   Sorry, your browser does not support inline SVG.
</svg> 
 </div>

【讨论】：

svg 之间似乎没有间距。表观间距在 svg 内（100px svg 中的 80px 圆圈）