css - 如何为用坐标绘制的 SVG 图像着色？

Question

作为编程作业的一部分，我正在尝试为所有欧洲国家着色。我从下面的维基百科找到了这些国家的坐标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;
}

然而，它不起作用。出了什么问题？

提前致谢

Answer 1

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

一旦你这样做了，它就会显示出来，但是这个国家太小了，无论它是什么颜色，你都看不到它，即使着色确实有效。如果你给 <svg>元素 viewBox="1415 390 30 30" 的 viewBox you can then see it并看到在 CSS 中调整颜色会改变它。