JavaScriptを使用してHTMLドキュメントに埋め込まれたSVGドキュメントを操作することは可能ですか？

StackOverflow https://stackoverflow.com/questions/138309

  •  02-07-2019
  •  | 
  •  

質問

データのグラフを表示するために、SVG画像、またはそれ以上のミニアプリケーションを作成しました。これをHTMLページに含めて、SVG画像のメソッドを呼び出したい。

例：

<object id="img" data="image.svg" width="500" height="300"/>
<script>document.getElementById("img").addData([1,23,4]);</script>

SVGドキュメントのメソッドを呼び出すことは可能ですか？もしそうなら、SVGファイルで公開するメソッドをどのように宣言し、HTMLドキュメントからどのように呼び出すのですか？

役に立ちましたか？

解決

解決策：

svg：

<script>document.method = function() {}</script>

html（プロトタイプを使用してイベントリスナーを追加）：

<script>$("img").observe("load", function() {$("img").contentDocument.method()});

画像のloadイベントをリッスンする必要があります。画像が読み込まれると、 element.contentDocument を使用して、svgドキュメントのドキュメント変数にアクセスできます。それに追加されたメソッドはすべて利用可能になります。

他のヒント

実際には、予想よりも簡単です。複雑なチュートリアルを読んで概念を理解する必要はありません。また、JQueryを使用する必要もありません。基本的なレイアウトは次のとおりです。

  • htmlドキュメントのJavaScript関数。

    <script type="text/javascript">
function change(){
    var s=document.getElementById("cube");
    s.setAttribute("stroke","0000FF");
}
</script>

  • 操作しようとしているSVG要素。

    <svg width=100 height=100 style='float: left;'>
  <rect x="10" y="10" width="60" height="60" id="cube" onclick="change()" stroke=#F53F0C stroke-width=10 fill=#F5C60C />
</svg>

  • 変更をトリガーするインラインボタン。この例では、キューブ自体をクリックすることでもイベントをトリガーできます。

    <button onclick="change()">Click</button>

数年前、SVGを使用して2人用のAjaxベースのゲームを作成するように依頼されました。探しているソリューションではないかもしれませんが、SVGでイベントをリッスンするのに役立つ場合があります。 SVGコントローラーは次のとおりです。

fyi、SVGはドラッグアンドドロップされていました（Strategoでした） 

/****************** Track and handle SVG object movement *************/
var svgDoc;
var svgRoot;
var mover='';       //keeps track of what I'm dragging

///start function////
//do this onload
function start(evt){
    //set up the svg document elements
    svgDoc=evt.target.ownerDocument;
    svgRoot=svgDoc.documentElement;
    //add the mousemove event to the whole thing
    svgRoot.addEventListener('mousemove',go,false);
    //do this when the mouse is released
    svgRoot.addEventListener('mouseup',releaseMouse,false); 
}

// set the id of the target to drag
function setMove(id){ mover=id; }

// clear the id of the dragging object
function releaseMouse(){ 
    if(allowMoves == true){ sendMove(mover); }
    mover=''; 
}

// this is launched every mousemove on the doc
// if we are dragging something, move it
function go(evt){
    if(mover != '' && allowMoves != false) {
        //init it
        var me=document.getElementById(mover);

        //actually change the location
        moveX = evt.clientX-135; //css positioning minus 1/2 the width of the piece
        moveY = evt.clientY-65;
        me.setAttributeNS(null, 'x', evt.clientX-135);
        me.setAttributeNS(null, 'y', evt.clientY-65);
    }
}

function moveThis(pieceID, x, y) {
    $(pieceID).setAttributeNS(null, 'x', x);
    $(pieceID).setAttributeNS(null, 'y', y);
}

私のアプリは純粋なSVG + JavaScriptでしたが、これがその要点です。

私は、David Dailey博士をあなたが見つける最も素晴らしいSVG / JS情報として参照します http://srufaculty.sru.edu/david.dailey/svg/

JavaScriptでsvgを調べました。ブログを参照してください： JavaScriptでSVGグラフィックスをスケーリングする

jQuery SVGプラグイン

も参照してください。

IE6でのサポートについては、 SVGWeb をご覧ください。

ライブラリに付属のサンプルコードには、JavaScriptでSVGを操作する方法の例があります。

メーリングリストのアーカイブにもかなりの量の情報があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top