如何給svg元素路徑賦予背景顏色？

我已經轉換圖像SVG和得到像下面如何給svg元素路徑賦予背景顏色？

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" 
width="122.000000pt" height="98.000000pt" viewBox="0 0 122.000000 98.000000" 
    preserveAspectRatio="xMidYMid meet"> 
<metadata> 
Created by potrace 1.14, written by Peter Selinger 2001-2017 
</metadata> 
<g transform="translate(0.000000,98.000000) scale(0.100000,-0.100000)" 
fill="#000000" stroke="none"> 

<path d="M93 873 c-7 -3 -6 -653 0 -660 5 -4 889 -185 892 -181 1 1 35 69 74 
151 l71 147 0 273 0 272 -515 0 c-283 0 -518 -1 -522 -2z m1007 -284 l0 -251 
-66 -139 c-59 -122 -70 -138 -88 -134 -12 3 -106 23 -211 46 -104 22 -219 47 
-255 54 -36 8 -85 21 -109 30 -24 8 -56 15 -70 15 -15 0 -49 7 -75 16 -26 9 
-58 14 -71 12 -15 -3 -26 0 -29 9 -4 8 -6 145 -6 304 l0 289 490 0 490 0 0 
-251z" style="fill:green;background-color:red"/> 

</g> 
</svg>

我要的是給用顏色填充路徑上的任何顏色的路徑矢量但是當我使用填補它只是改變邊框的顏色不內完整路徑節點的顏色。我試過

style="fill:green;background-color:red"

但是不能工作只能改變邊界而不是內部？這裏是jsfiddle鏈接Link to example可以任何身體轉換和填充顏色的路徑？

來源

2017-07-14 nouman arshad

的事情是，你的SVG沒有任何「內部」。你的SVG實際上就是你所說的邊界。您不能爲內部設置顏色，因爲它不是SVG的一部分。 – norin89

你可以請內心如何解決任何問題，因爲我不是svg專家請做一些考慮棘手 –

你可以添加一些價值或邏輯到它的內在顏色 –

問題是您的SVG沒有任何「內部」。你的SVG實際上就是你所說的邊界。你不能爲裏面的內容設置顏色，因爲它不是你的SVG的一部分。

在圖像中指定了一個「洞」。這是您的代碼從m1007開始並以-251z結尾的路徑 - 由於規格說明：「M表示移動到...，而z表示近距離路徑）」。如果刪除該部分，則將具有整個形狀沒有內部的空隙。

https://jsfiddle.net/norin89/qhqa4kyq/4/

來源

2017-07-14 11:22:03 norin89

你如何猜測我有許多類似的SVG有任何在線工具或快捷方式來檢查整個路徑，所以我刪除從路徑.. –

什麼科學背後，所以我也糾正我的其他圖片..快速 –

我不知道任何在線工具做到這一點。您可以使用一些應用程序來製作矢量圖形（例如Adobe Illustrator或Inkspace）。或者，如果您想直接在代碼中執行，只需在'path'中查找'M'和'Z'。由於[規範]（https://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation）：「M表示移動到...，而z表示近距離路徑）」。如果你不想自動執行，你可能會寫一些'regexp'來爲你刪除那部分'path'。 – norin89

如何給svg元素路徑賦予背景顏色？

回答

相關問題