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をフォークして手動で行うと、問題なく表示されます。

コードの最も関連性の高い部分（IMHO）のみを含めました。リクエストに応じてさらに投稿します。

編集： GoogleChromeとMozillaFirefoxでテスト済み。両方とも失敗します。

編集＃2：どちらのアプローチでも、FirebugもJavascriptコンソール（Chrome）でもエラーは発生しませんでした。

編集：

コメントの@Billと回答の@SimonBoudriasの両方が、問題をそのまま指摘していました。

メイン要素の子パスの多くは白で塗りつぶされており、オーバーライドする必要がありました。解決策はついに些細なものでした。

ソリューション

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>グループ要素を選択しているとき。したがって、fillプロパティまたはstyle属性をその子で機能させるには<path>、独自のfill属性をクリアまたは変更する必要があります。

したがって、これをテストできます:(使用する変数の値によっては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");
}
于 2012-10-13T19:36:14.330 に答える