4

jQuery を介してインライン SVG 画像に要素を追加するスクリプトがありますが、新しい要素が表示されていないようです。出力は完全に有効です。元のファイルにコピーしてリロードすると、問題なくレンダリングされます。しかし、スクリプトがそれを生成するとき、新しい要素は表示されません。

問題を再現するスニペットを次に示します: http://tinkerbin.com/7OmDWlsz

前もって感謝します！

4

2 に答える 2

7

要素がsvg名前空間にない場合、svg出力は表示されません。

スクリプトスニペットを次のように置き換えてみてください。

var slices = 10;

for(i = 0; i < 360; i += 360 / slices) {
  var element = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
  element.setAttribute("points", "0,0 -10,100 10,100");
  element.setAttribute("transform", "rotate(" + i + ")");
  $('#rotate').append(element);
}
于 2012-07-03T08:00:53.980 に答える
0

@Erik Dahlströmに感謝します。これに貢献を加えるかもしれません。svg ツリーを構築するために定義する関数は次のとおりです。

Node.prototype.svg_grow = function(node_name, node_attr) {
    n = document.createElementNS("http://www.w3.org/2000/svg", node_name);
    this.appendChild(n);
    if (typeof node_attr !== 'undefined') {
        for (key in node_attr) {
            n.setAttribute(key, node_attr[key]);
        }
    }
    return n;
}

したがって、次のsvg_grow()ように任意のノードで使用できます。

s_g = document.getElementById("parent");
s_rect = s_g.svg_grow('rect', {x:0, y:0, width:480, height:640});

ただ行う：

<g id="parent">
    <rect x="0" y="0" width="480" height="640" />
</g>
于 2015-03-14T15:31:52.273 に答える