如何上色用座標繪製的SVG圖像？

作爲編程任務的一部分，我試圖爲所有歐洲國家提供顏色。我從以下wikipedia找到這些國家的座標page。如何上色用座標繪製的SVG圖像？

比方說，我想爲北愛爾蘭打顏色。座標在這裏給出：

<path xmlns="http://www.w3.org/2000/svg" class="landxx gb eu" d="M 1260.508,337.032 C 1261.121,336.062 1262.494,336.081 1263.388,335.52 1263.057,335.277 1262.743,335.012 1262.448,334.727 1264.3,335.304 1265.011,333.238 1265.893,332.227 1266.732,331.266 1268.474,332.53 1268.718,330.767 1270.35,331.522 1272.386,329.639 1274.016,330.766 1274.677,331.222 1275.068,332.288 1275.375,332.975 1275.319,332.851 1276.594,334.325 1276.56,334.063 1276.597,334.341 1275.171,335.037 1274.978,335.231 1275.478,335.181 1276.972,334.543 1277.301,335.202 1277.635,335.87 1278.28,337.23 1277.138,337.536 1277.316,336.828 1277.055,335.884 1276.128,336.096 1276.687,336.427 1276.615,337.009 1276.268,337.464 1276.561,337.31 1276.811,337.331 1277.018,337.527 1277.091,338.02 1275.965,338.658 1275.586,338.698 1274.608,338.801 1274.61,340.437 1273.42,340.084 1272.419,339.787 1272.235,339.475 1271.382,340.035 1270.657,340.511 1269.467,340.023 1269.788,339.049 1269.388,339.07 1266.639,336.003 1266.454,337.971 1266.126,341.45 1261.861,338.159 1260.508,337.032" id="path2690"/>

我想在單獨的CSS文件中給這個國家上色。我雖然可以通過訪問CSS文件中的國家/地區ID來執行此操作：

#path2690 { 
    fill: green; 
}

但是，它不工作。出了什麼問題？

非常感謝

來源

2014-06-10 Max Muller

任何jsfiddle可用？ –

你如何將你的SVG鏈接到css文件？你如何使用SVG文件作爲獨立的圖像或嵌入到一個HTML文件，如果是這樣你如何嵌入它？ –

@Midhun和Robert Longson這裏是jsfiddle：http://jsfiddle.net/xG8qs/ –

這裏有幾個問題。首先，您不能在html文件中顯示原始SVG <path>，它必須包含在<svg>元素中。

一旦你這樣做，它顯示，但國家是如此之小，即使着色實際上起作用，不管它是什麼顏色，你都看不到它。如果您給<svg>元素添加了一個viewBox="1415 390 30 30"you can then see it的視圖框，並且看到調整CSS中的顏色會改變它。

來源

2014-06-10 13:36:23

非常感謝！但我還有一個最後的問題。我想讓多個國家在地圖上的「正確」位置。你知道如何做到這一點？ –

據我所見，他們處於「正確」的位置，所以再問一個問題並提出問題的細節。 –

如何上色用座標繪製的SVG圖像？

回答

相關問題