如何將一個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？

回答

相關問題