如何將邊框添加到包含svg的背景圖像？

Question

像標題一樣，我的問題是在包含svg的背景圖像周圍獲得邊框。 當我嘗試在該背景圖像上使用css邊框時，邊框將向內並減小圖像。 我讀過一些關於使用svg：image的東西，但對我來說，我必須編輯svg代碼本身來獲得邊框。 沒有任何解決方案使用CSS來做到這一點？

解決

謝謝您的解答。但正如我所說，我不想改變svg文件內的任何東西。 我爲自己找到了一個工作解決方案。

.s-icon { 
    height: 50px; 
    text-align: center; 
    width: 50px; 
} 

.s-icon--border { 
    background-color: lightblue; 
    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    line-height: 0; 
    border: 4px solid lightskyblue; 
} 

https://codepen.io/anon/pen/eRBQoE

Answer 1

繪製<rect>圓是填充= 「無」 的圖像。您可以使用<rect>的筆畫作爲邊框。

Answer 2

你可以用的box-shadow做

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: tomato; 
 
    box-shadow: 0 0 0 5px rgba(0,0,0,1); 
 
}

<div></div>