1

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

这是我正在使用的 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);
}
4

1 回答 1

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");
}
于 2012-10-13T19:36:14.330 回答