如何将一个svg放入一个跨度内并获得跨度以包围svg？

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

来源

2016-05-15 Greg Clinton

为什么跨度，而不是单吗？ – bumbeishvili

，因为我需要的结果是并排的，没有堆积 –

添加CSS规则，使跨度为display: inline在默认情况下是display: inline-block。

span { 
    display: inline-block; 
}

https://jsfiddle.net/4maotyv4/

来源

2016-05-15 22:04:35 aifrim

是的。直到现在我还不知道内联块。非常感谢你。 –

HTML元素具有人们忘记的默认设置。不用谢：） – aifrim

我建议以下解决方案

<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>

来源

2016-05-15 22:03:08 gevorg

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

欢迎您！ – gevorg

如何将一个svg放入一个跨度内并获得跨度以包围svg？

回答

相关问题