web-dev-qa-db-ja.com

SVG（Scalable Vector Graphics）でjqueryを使用する方法は？

地図を表示するためにphpファイルにSVGを埋め込みました。 Itでjqueryを使用したいのですが、jqueryをリンクする方法がわかりません。誰かがすでにそのようなことをしていることを願っています。この問題について助けてください。

ありがとう

[〜＃〜] edit [〜＃〜]

[〜＃〜] here [〜＃〜] 私の質問に関する有用な情報が見つかりました。それでも私はCSSまたはリンクをロードイベントに追加する方法を知る必要があります。

jquerysvg
26
kamal

Jquery-svgライブラリは、特にこれを容易にすることを目的としています。 http://keith-wood.name/svg.html

ライブラリの使用を避けたい場合は、いくつかの基本的な初期の課題と決定事項を考慮する必要があります。

最初に、SVGの埋め込み方法を指定する必要があります。 SVGは、ほとんどの最新ブラウザーのXHTML「インライン」に含めることができます。次に、より一般的には、HTML埋め込みタグまたはオブジェクトタグを使用してSVGドキュメントを埋め込むことができます。

最初のアプローチを使用する場合、ホストHTMLドキュメントでHTMLスクリプト要素を使用してjQueryをインポートできます。HTMLドキュメント内のスクリプトは、インラインSVGドキュメント内の要素に簡単にアクセスできます。期待する。

ただし、2番目の方法を使用し、オブジェクトまたは埋め込み要素を使用してSVGを埋め込む場合は、さらにいくつかの決定を行う必要があります。最初に、jQueryをインポートするかどうかを決定する必要があります

  • hTMLスクリプト要素を使用したHTMLスクリプト要素を使用したHTML埋め込みコンテキスト、または
  • sVGドキュメント内のSVGスクリプト要素を使用して、SVG埋め込みコンテキスト。

後者のアプローチを使用する場合、新しいバージョンではSVGドキュメントで動作しない機能検出を使用するため、jQueryの古いバージョンを使用する必要があります（1.3.2で動作するはずです）。

より一般的なアプローチは、jQueryをホストHTMLドキュメントにインポートし、埋め込みコンテキストからSVGノードを取得することです。ただし、埋め込みSVGドキュメントは非同期にロードされるため、このアプローチには注意する必要があります。そのため、Host要素を取得するには、オブジェクトタグにonloadリスナーを設定する必要があります。 HTMLから埋め込みSVGドキュメントのドキュメント要素を取得する方法の完全な説明については、この回答を参照してください。 Javascriptを使用してSVG要素にアクセスする方法

埋め込みSVGドキュメントのルートdocumentElementを取得したら、埋め込みHTMLドキュメントでjQueryを使用してクエリを作成するときに、コンテキストノードとして使用する必要があります。たとえば、次の操作を実行できます（テストされていませんが、動作するはずです）。

<html>
    <head>
        <title>SVG Illustrator Test</title> 
    <script src="jQuery.js"></script>
    <script>
        $(document).ready(function(){
            var a = document.getElementById("alphasvg");

            //it's important to add an load event listener to the object, as it will load the svg doc asynchronously
            a.addEventListener("load",function(){
                var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg
                var svgRoot  = svgDoc.documentElement;

                //now we can query stuff with jquery like this
                //note that we pass in the svgRoot as the context node!
                $("foo bar",svgRoot);
            },false);
        })
    </script>
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>

    </body>
</html>
43
jbeard4

SVGはDOMの要素を使用します。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600">
    <desc>My SVG</desc>
    <defs>
       <path fill="#ffffff" stroke="#ffffff" d="M100,100L100,100Z" style="fill-opacity:
        0.3; stroke-width: 1; stroke-linecap: round;" fill-opacity="0.3" 
        stroke-width="1" stroke-linecap="round">
</svg>

JQueryがDOM内の他のオブジェクトを操作するのと同じ方法で、アクセスして操作できます。すなわち。

$('svg path').remove(); //removes the path.

SVG要素を操作するJavaScriptライブラリを探している場合は、 Raphael.js を確認してください。

11
Andrew