把邊框圍繞SVG（轉換）圖像

所以我有這樣的圖像（從PNG轉換爲SVG）把邊框圍繞SVG（轉換）圖像

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M32 22c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm-16 0c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm0 4c-4.67 0-14 2.34-14 7v5h28v-5c0-4.66-9.33-7-14-7zm16 0c-.58 0-1.23.04-1.93.11C32.39 27.78 34 30.03 34 33v5h12v-5c0-4.66-9.33-7-14-7z"/></svg>

現在我可以用填充來改變顏色等。但我不管理用邊界屬性在圖像本身周圍畫一個筆畫，我只是在整個元素周圍畫一個矩形（所以不是在圖像周圍），而用筆畫我什麼也得不到。

這裏是與中風和邊境propertie一個的jsfiddle嘗試：https://jsfiddle.net/9mbqdbcj/

有誰知道我怎樣才能在圖像周圍的邊界？

在此先感謝。

來源

2015-08-25 JohanStaart

您可以使用此stroke和stroke-width屬性：

CSS：

stroke: red; 
stroke-width: 0.1;

小提琴：https://jsfiddle.net/9mbqdbcj/2/

來源

2015-08-25 10:11:53 Lauromine

關鍵的區別更多的是'行程語法'這不是t他和'border'一樣。更多信息：https：//developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes#Using_CSS – cjol

您可以在路徑中元素的運用，你也可以嘗試這種方式我你有訪問改變HTML然後

stroke="red" stroke-width="0.3"

這裏是你的代碼

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M32 22c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm-16 0c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm0 4c-4.67 0-14 2.34-14 7v5h28v-5c0-4.66-9.33-7-14-7zm16 0c-.58 0-1.23.04-1.93.11C32.39 27.78 34 30.03 34 33v5h12v-5c0-4.66-9.33-7-14-7z" stroke="red" stroke-width="0.3" /></svg>

演示代碼DEMO

，你可以從中學到Learn more

來源

2015-08-25 10:22:44

把邊框圍繞SVG（轉換）圖像

回答

相關問題