2

HTMLドキュメントにSVG画像（地図）を含める必要があります。うまくいけば、JQueryを使用してそれを操作できます。これをインターネットで調べたところ、SVGを直接操作できないと言う人もいます。KeithWoodによるJQuerySVGプラグインを提案する人もいましたが、そのリンクを開くことができません。これは、SVGコードをhtml5に直接含めることができるという例です。一つには、私のSVGコードは少し長いので、そこにコードを置くとひどく見えます。もう一つは、それを行っても、それを操作する方法がまだわかりません。

したがって、フレームワークを使用できると思います。Raphaelを試しましたが、SVGを別の形式に変換する必要があり、Raphaelが画像をレンダリングしてくれます。しかし、奇妙なことに、SVG画像を変更した後、画像ははるかに小さくなりました。そして、私は何が悪いのか理解するのに苦労しています。

私が達成したいことは、admob.comのこのページと非常によく似ています。このページには、ページに直接SVGコードが含まれているようです。

誰かがそのようなことを達成するためにいくつかのアドバイスを与えることができますか？

ありがとう。

4

2 に答える 2

10

SVGを編集するために実際にはjQueryは必要ありません（ただし、使用することはできます）。次のようなオブジェクトタグを使用してSVGドキュメントを含めます。

<object data="mySVG.svg" type="image/svg+xml" id="mySVG"></object>

document次に、次のように取得して、SVGのDOMを操作できます。

var svgObject = document.getElementById("mySVG");

moSVG.onload = function(){
    var svgDoc = moSVG.contentDocument;
    //Do SVG manipulation here, using svgDoc instead of document
}

の使用に注意してくださいonload。これがないと、SVGが完全に読み込まれる前にJSが実行されるため、エラーが発生する可能性があります（特に、SVGで画像を使用する場合）。

SVGがロードされていることを確認したら、onloadステートメントの外でJavaScriptで使用できます。

一方、JavaScriptをSVG内に直接埋め込みたい場合は、<script>通常どおりタグを使用できますが、1つの注意点があります。外部JSが必要な場合はxlinkを使用する必要があります（jQueryをインポートする次の例のように）

<script type="text/ecmascript" xlink:href="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>

内部JSは次のように説明できます。

これを使用することにした場合は、必ずxlink開始<svg>タグで次のように定義してください（URLは変更しないでください）。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

ただし、SVGに直接含まれているJSは、HTMLページに何も表示されないことに注意してください。

于 2012-07-27T15:18:24.737 に答える
0

@SomeKittensの回答に投票しました。これは、探していることを実行する正しい方法ですが、代わりにReady Set Raphaelを使用することもできます。SVGのRaphaelコードが提供され、他のコードと同じように使用できます。ラファエルJS。（明らかに、これを使用するにはRaphaelを含める必要があります）。独立した要素を参照する場合は、変数名を理解する必要があります。

于 2012-07-27T17:47:18.390 に答える