如何为使用坐标绘制的SVG图像着色?

时间:2014-06-10 12:31:25

标签: css html5 svg path

作为编程任务的一部分,我试图为所有欧洲国家提供颜色。 我从以下维基百科page找到了这些国家的坐标。

比方说,我想给北爱尔兰上色。坐标在这里给出:

<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;
}
但是,它不起作用。出了什么问题?

提前多多感谢

1 个答案:

答案 0 :(得分:4)

这里有几个问题。首先,您无法在html文件中显示原始SVG <path>,它必须包含在<svg>元素中。

一旦你这样做,它会显示,但是国家是如此之小,即使着色确实有效,无论它是什么颜色都看不到它。如果您为<svg>元素提供viewBox="1415 390 30 30" you can then see it的viewBox,并且看到调整CSS中的颜色会更改它。