javascript - 为什么这个 Javascript - SVG CSS 操作不起作用？

Question

我很快就要发火了(提问者注意)

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

这是一个免费的公共(public)领域 - 用 SVG 制作的全局 map ，其中(几乎)每个国家都被各自的边界所包围。

先别去那里!您不必立即寻找它。

我还有件事要先告诉你。

这是图片的相关部分:
(编辑)西类牙是我在两个示例中试图操纵的国家/地区

<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 文件中 fork 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>元素。因此，为了使填充属性或样式属性在其子项上起作用 <path>您需要清除或更改自己的填充属性。

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

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

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