1

私は非常に興味深い問題を抱えています。divに新しいSVG要素を追加すると、最初に追加が呼び出されたときにのみ、新しいsvg要素が表示されます。ハードコーディングすると機能しますが、マウスダウンで追加すると、HTMLファイルに追加されても表示されません。それはSVGの理解の問題であり、要素を動的に追加することはできないと思いますが、私はインターネットを見回していて、このテーマについて何も見つかりません。

$（document）.mousedown関数で、新しい円がsvgホルダーに追加されていることがわかりますが、SVGホルダーに追加されても、Webページには表示されません。

コード：

HTML：

<div id="svgHolder">
    <!--THIS CIRCLE SHOWS UP-->
    <svg><circle cx='50' cy='50' r='40' stroke='black' stroke-width='1' fill='red' /></svg>
</div>

JQuery / JavaScript：

$(document).ready(function(){

var mouse={
    x:0,
    y:0,
    drawing:false,
    lastX:0,
    lastY:0,

}

$(document).mousedown(function(e){
    console.log('md')
    mouse.x=e.clientX
    mouse.y=e.clientY
    mouse.drawing=true
            //THIS CIRCLE WILL BE ADDED TO THE SVGHOLDER, BUT WILL NOT SHOW UP
    $("#svgHolder").append("<svg><circle cx='"+mouse.x+"' cy='"+mouse.y+"' r='40' stroke='black' stroke-width='1' fill='red' /></svg>");
});

$(document).mouseup(function(e){
    console.log('mu')
    mouse.x=e.clientX
    mouse.y=e.clientY
    mouse.drawing=false
});



$(document).mousemove(function(e){
    console.log('mm')
    mouse.x=e.clientX
    mouse.y=e.clientY
});



});
4

2 に答える 2

4

あなたsvgは挿入されていますが、ビューポートの外にあるため、ビューポートを表示できません。にいくつかwidthを追加heightし、プロパティにsvg適切な値を設定します。cxcy

$(document).mousedown(function(e){
    $("#svgHolder")
    .append("<svg width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='1' fill='red' /></svg>");
});

また、CSSピクセルでビューポートを基準にした座標を覚えておいてclientXください。clientY

SVGに関するExample1、Example2など。

于 2012-12-03T21:38:40.110 に答える
4

ノードを動的に作成するときはsvg、名前空間を作成する必要があると思います。

var ns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(ns, "svg");
$(svg).append("<circle ...");
于 2012-12-03T21:17:14.417 に答える