2

次のようにjQueryでSVGタグを作成することは可能ですか:

var dragSVG = $('<svg xmlns="http://www.w3.org/2000/svg"></svg>');
dragSVG.append('<rect x="0" y="0" width="20" height="20" style="fill:red"></rect>');

もしそうなら、どのようにして DOM にアクセスできるのでしょうか? すなわち。HTML の場合は、次のようにします。

return dragSVG.html();

しかし、HTML ではないため、これは例外をスローします... または、完全に基本的なものが欠けています!?

編集：

私が達成しようとしていることをもう少し明確に説明しようと思います。メインの SVG キャンバスにドラッグできる SVG の「アイテム」を表すボタンがあります。ユーザーがドラッグを開始すると、マウスの下に SVG の「アイテム」を表示して、ユーザー フィードバックを提供したいと考えています。ユーザーがこれをキャンバスにドロップしたら、「アイテム」をメイン キャンバスに移動する必要があります。

      $('#testBtnDrag').draggable({
          opacity: 0.7,
          revert: 'invalid',
          cursorAt: { top: 0, left: 0},
          helper: function (event) {
              var dragSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect x="0" y="0" width="20" height="20" style="fill:red"></rect></svg>';
              return dragSVG;
          }              
      });

      // I can't attach the droppable to the SVG tag directly, IE / FF don't work with this
      // so we have to attach it to a <div> tag that wraps the <svg>.
      $('#drawArea').droppable({
        accept: '.svg-item',
        drop: function (event, ui) {
          // Get the mouse offset relative to the <svg> canvas
          var posX = event.originalEvent.clientX - $(this).offset().left;
          var posY = event.originalEvent.clientY - $(this).offset().top;

          // Get the dragged element and put it onto the "main" canvas
          var rawSVG = ui.helper.children().html()  // This won't work!
          var mainCanvas = $('#drawArea > svg');
          mainCanvas.append(rawSVG);
        }
      });

  });
4

4 に答える 4

5

A<svg>など<path>はSVGAnimatedStringcreateElementオブジェクトであり、jQuery 自体はタグ作成に関数を使用しているため生成できません。jQuery の簡単なハックは次のようになります。

ここに画像の説明を入力

    // line 526 in jquery-X.X.X.js, in my case it is jquery-1.9.1.js   
    // Single tag
    if ( parsed ) {
        // ----------------------------------------------------
        var xml_html_element;
        if ( parsed[1] == "svg" || parsed[1] == "path" ) {
            xml_html_element = context.createElementNS( "http://www.w3.org/2000/svg", parsed[1] );
        } else {
            xml_html_element = context.createElement( parsed[1] );
        }
        return [xml_html_element];
        // ----------------------------------------------------
        //return [ context.createElement( parsed[1] ) ];

    }

これで、次のように jQuery を使用できます。

var $svg = $("<svg>").attr({'version': "1.1"});
var $path = $("<path>").attr({
    'd': 'M' + 10 + ',' + 100 + ' C' + 200 + ',' + 150 + ' ' + 200 + ',' + 170 + ' ' + 300 + ',' + 250,
    'fill': "none",
    'stroke': "rgba(100,100,100,0.9)",
    'stroke-width': "1"
});
var $body = $("body");
$body.append($svg.append($path));

もちろん、個人的に必要な場合は、このハックで SVG タグの数を増やすことができます。

parsed[1] == "svg" || parsed[1] == "path" || parsed[1] == "line" || etc. ...
于 2013-02-20T16:54:19.150 に答える
2

SVG は基本的に XML ファイル形式です。代わりにparseXML()を試してください。これが機能しない場合は、 http://keith-wood.name/svggraphRef.htmlを試してください。

于 2012-08-03T09:22:44.637 に答える
-1

jQuery で SVG を使用しましたが、jQuery コア ライブラリ内で何も変更する必要はありません。以下のようにsvgタグを生成するだけです

var svg = $('<svg></svg>').attr('xmlns','http://www.w3.org/2000/svg');

jquery を使用してこれを jQuery 経由で dom に追加する$('body').html(svg);と、dom オブジェクトとして扱われ、属性などを追加できるように、このタグで dom 関連のメソッドを呼び出すことができます。また、jquery を使用してアクセスできるように、id または class 属性を割り当てることもできます。

于 2013-09-18T00:22:06.517 に答える