为什么这个 Javascript - SVG CSS 操作不工作？

Question

我很快就要拍了（提问者备注）

这是我正在使用的 SVG 图像：http://en.wikipedia.org/w/index.php?title=File:World98.svg&page=1

这是一个免费的公共领域 - 用 SVG 制作的全球地图，其中（几乎）每个国家都被各自的边界所包围。

不要去那里！您不必立即寻找它。

我还有件事要先告诉你。

这是图片的相关部分：
(edit) 西班牙是我在这两个例子中试图操纵的国家

<g
   id="gESP">
  <path
     class="region"
     d="M472.55,197.77 472.27,198.22 471.8,197.9 472.55,197.77Z"
     id="polyF1S67P1" />
  <path
     class="region"
     d="M479.45,196.82 479.35,197.75 478.75,197.9 478.33,197.55 478.67,196.8 479.45,196.82Z"
     id="polyF1S67P2" />
  <path
     class="region"
     d="M474.5,197.17 474.1,196.9 474.3,196.67 474.72,196.92 474.5,197.17Z"
     id="polyF1S67P3" />
  <path
     class="region"
     d="M476.85,196.17 475.95,197.22 475.27,196.3 477.45,195.62 476.85,196.17Z"
     id="polyF1S67P4" />
  <path
     class="region"
     d="M482.8,196.77 481.97,196.95 482.7,196.62 483.33,195.27 483.75,195.17 483.55,196.52 482.8,196.77Z"
     id="polyF1S67P5" />
  <path
     class="region"
     d="M472.7,195.88 472.22,195.12 472.42,194.9 473,195.22 472.7,195.88Z"
     id="polyF1S67P6" />
  <path
     class="region"
     d="M484.12,194.7 483.72,194.82 483.92,194.3 484.95,193.9 484.8,194.45 484.12,194.7Z"
     id="polyF1S67P7" />
  <path
     class="region"
     d="M526.65,167.6 526.12,167.47 526.65,167.6Z"
     id="polyF1S67P8" />
  <path
     class="region"
     d="M526.25,166.9 525.62,166.95 525.97,166.45 526.72,166.42 526.25,166.9Z"
     id="polyF1S67P9" />
  <path
     class="region"
     d="M530.97,164.47 531.85,164.75 530.77,165.85 529.72,165.17 528.82,165.1 530.3,164.15 531.12,164 530.97,164.47Z"
     id="polyF1S67P10" />
  <path
     class="region"
     d="M534.15,164.35 532.97,164.02 532.95,163.72 533.97,163.8 534.15,164.35Z"
     id="polyF1S67P11" />
  <path
     class="region"
     d="M500.85,153.45 502.62,154.02 506,153.77 509.67,154.4 512.23,154.12 515.75,154.65 517.25,154.42 518.32,154.9 518.17,155.42 518.62,155.27 520.6,156.12 523.67,156.45 524.35,156.02 525.97,156.42 526.38,157.15 529.6,157.4 530.47,157.05 531.43,157.55 531.02,157.62 531.25,158.5 530.57,159 528.02,160.32 525.1,160.95 524.22,161.62 524.62,162 523.9,162.2 521.32,165.22 521.67,166.5 522.8,167.35 520.8,168.57 519.97,170.1 520.1,170.57 518.55,170.67 517.67,171.15 516.15,172.95 515.42,172.7 514.5,173.02 510.1,173.02 509.25,173.6 507.88,173.82 506.6,174.95 505.45,174.5 504.5,173.25 504.97,172.47 504.47,172.7 503.17,171.45 501.65,171.72 501.4,170.77 502.9,168.92 502.5,168.95 501.82,168.17 502.8,166.52 501.3,164.85 502.7,164.7 503.07,163.85 502.7,163.42 503.32,162.95 503.02,161.02 504.9,159.45 504.05,159.25 503.85,158.5 499.6,158.88 499.27,157.97 497.65,158.55 497.55,158.05 498.1,157.57 497.75,157.55 497.8,156.67 497.15,156.7 497.42,156.12 496.57,155.62 496.75,155.07 497.57,154.65 499.02,154.47 499.3,153.95 500.85,153.45Z"
     id="polyF1S67P12" />
</g>

我想做的，是用Javascript把国家填成红色。

我试过这个：

尝试 #1 - 没有成功

function selectedCountryChanged(id) {
    var tmp = $("#selectedCountry").find("option:selected");
    var val = tmp.data('alpha');

    console.log('val'); // shows ESP in console

    for (var s in a.style) {
        console.log(s); // shows correctly all style properties in console
    }
        var a = document.getElementById("g"+val);
    a.style.fill = '#ffff00';
    console.log(a.style.fill); // shows rgb(255, 0, 0) in console
}

尝试 #2 - 没有成功

function selectedCountryChanged(id) {
    var tmp = $("#selectedCountry").find("option:selected");
    var val = tmp.data('alpha');
    var a = document.getElementById("g"+val);
    console.log(val); // shows ESP in console
    for(var s in a.style) {
        console.log(s); // shows all css-properties correctly
    }
    console.log(id + " " + val);

    a.setAttribute("style", "fill: #ff0000");
    console.log(a.style.getPropertyValue("fill")); // shows rgb(255, 0, 0) in console
}

即使所有的调试信息都显示一切正常，这该死的东西为什么没有被红色填充一定是有原因的？如果我通过在 SVG 文件中分叉 css 部分来手动执行此操作，则显示正常。

我只包含了代码中最相关的部分（恕我直言）。我会根据要求发布更多内容。

编辑：已使用 Google Chrome 和 Mozilla Firefox 进行测试。两者都失败了。

编辑 #2： 在这两种方法中，Firebug 和 Javascript 控制台（在 Chrome 中）都没有出现错误。

---

编辑：

@Bill 在他的评论中和@Simon Boudrias 在他的回答中都指出了问题所在。

主元素的许多子路径都用白色填充，需要被覆盖。解决方案终于很简单了。

解决方案

function selectedCountryChanged(id) {
    // use the selection id to get alpha3-country identifier
    var tmp = $("#selectedCountry").find("option:selected");
    var val = tmp.data('alpha');
    // Get the style - element defined in SVG
    var a = document.getElementById("mapStyle");
    // By assigning the * as class name, we quarantee
    // that all the children are filled with red as well
    var newFill = "#g"+val+" * { fill: red; }";
    // If prevSelectedCountry is set, remove the red filling by
    // setting it white
    if (window.prevSelectedCountry != undefined) {
        $(a).append(window.prevSelectedCountry);
    }
    // Add this country to prevSelectedCountry
    window.prevSelectedCountry = "#g"+val+" * { fill: white; }";
    // Fill this country with red
    $(a).append(newFill);
}

Answer 1

当我查看 .svg 图像时，我发现大多数 <path> 元素的 fill 属性设置为白色。因此，您需要先覆盖或删除此属性。

当您选择一个组<g> 元素时。因此，为了使 fill 属性或 style 属性对其子 <path> 起作用，您需要清除或更改它们自己的 fill 属性。

因此，您可以对此进行测试：（可能需要一些时间，具体取决于您使用的某些变量的值）

function selectedCountryChanged(id) {
    var tmp = $("#selectedCountry").find("option:selected");
    var val = tmp.data('alpha');
    var paths = $("#g" + val).find('path');

    paths.attr("fill", "#ff0000");
}