1

SVG で描画されるカスタム マップを作成しています。このマップにポリゴンを追加したいのですが、ポリゴンを追加しても描画されません。完全なページを .html ファイルに貼り付けて開くと、表示されます (http://peterelzinga.eu/map/test.html)。

私のSVGにポリゴンを追加するためのコード:

var svg = file_get_contents("18/135160/86183.svg");
var parser = new DOMParser();
var data = parser.parseFromString(svg, "text/xml");
data = data.firstChild;
console.log(data);
data.setAttribute ("x", d);
data.setAttribute ("y", e);
document.getElementById('front').appendChild(data);

ポリゴンを追加した後の SVG 要素:

<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
    <g id="back">
        <image xlink:href="12/2110/1345.png" x="0" y="0" width="256" height="256"></image>
    </g>
    <g id="front">
        <g width="256" height="256" x="0" y="0">
            <polyline fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="256,85.333 209,100.667 230.334,158.334 143,194.334 160.667,248.667 221.667,223.667 256,241.334 " onclick="alert('St Jansdal')"></polyline>
        </g>
    </g>
</svg>

なぜこれが起こるのか誰か知っていますか？

4

2 に答える 2

1

上記がうまくいかない理由は、私にはまだ謎です。しかし、私は次の解決策を使用して問題を解決することができました：

新しいsvg要素（ポリラインを含む）をロードしてメイン要素に追加するjavascript関数：

var api  = new XMLHttpRequest;
api.open("GET", a+"/"+b+"/"+c+".svg", false);

api.send("");

if( api.status == 200 ) {
    var parser = new DOMParser();
    var data = parser.parseFromString(api.responseText, "text/xml");
    data = data.firstChild;
    console.log(data);
    data.setAttribute("x", d);
    data.setAttribute("y", e);
    document.getElementById('front').appendChild(data);
}

これで、.svgファイルにポリライン要素だけを含める代わりに、ファイルに完全なsvg要素を配置しました。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
    <polyline fill="#FFFFFF" points="0,97 45,81.333 51.667,100.667 13.667,117.333 31,164 142.167,119.5 127.167,75.001 
172.667,53.341 152.5,0 0,0 "/>
</svg>

そして、これは機能します。IのX値とY値を設定することにより、svgを正しい場所に配置して、ポリラインが正しい場所に描画されるようにすることができます。

最終結果：

<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
    <g id="back">
        <image xlink:href="18/135160/86183.png" x="0" y="0" width="256" height="256"></image>
        <image xlink:href="18/135161/86183.png" x="256" y="0" width="256" height="256"></image>
        <image xlink:href="18/135160/86184.png" x="0" y="256" width="256" height="256"></image>
        <image xlink:href="18/135161/86184.png" x="256" y="256" width="256" height="256"></image>
    </g>
<g id="front">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
            <polyline name="St. Jansdal" fill="#FFFFFF" points="256,84.75 209,100.75 230.75,157.5 142.5,194.25 160.75,248.5 221.75,223.75 256,241 "></polyline>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="256" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
            <polyline name="St. Jansdal" fill="#FFFFFF" points="0,85.336 6.333,82.669 44,180.336 86,200.669 135.333,181.002 155.667,138.669 136.667,82.669   190,63.669 202,94.336 256,76.002 256,137.336 219.333,151.336 184.333,219.669 188.333,228.669 231.333,252.669 256,243.336   256,256 30,256 0,240.669 "></polyline>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="256" y="256" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
            <polyline name="St. Jansdal" fill="#FFFFFF" points="31.25,0 78.5,24 82.75,29.75 82.75,34.75 81.5,40 74.5,52.5 0,80.75 0,134.25 64.25,110 87.25,120   120.75,207.5 133.5,212.25 133.5,206 139.25,199.75 150,197.75 154,198.75 162,202.25 165.25,191.5 122.5,76.25 129.5,61.75   135.25,55 138.75,53.25 141.5,53.25 144.5,53.75 235.25,93.75 239.5,103.75 256,97.75 256,0 "></polyline>
        </svg>
    </g>
</svg>
于 2012-11-08T18:01:27.537 に答える