Question

我正在快速拍摄（提问者注意）

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

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

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

我还有别的事先告诉你。

以下是图像的相关部分：
（编辑）西班牙是我试图在两个例子中操纵的国家

<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-part手动完成它，它显示没问题。

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

编辑：使用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>起作用，您需要清除或更改自己的填充属性。

所以，你可以测试一下:(根据你使用的某些变量的值，可能需要一些tweek）

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

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

为什么地球上不是这个Javascript - SVG CSS操作工作？

1 个答案: