ここにいくつかのニュースがあります（質問を編集したり、新しい質問を作成したりするのではなく、ここに回答を入れたほうがよいと思います。必要に応じて自由に移動するか、修正できるように教えてください）：
私の問題は次のとおりでした：
var oldmap = new GGroundOverlay("test.svg", boundaries);
map.addOverlay(oldmap);
Safari 3、Firefox、Opera では動作しませんでした (IE では SVG を描画できません)。
実際、このコード<div>は、次の要素の ( 内の)挿入を生成します。
<img src="test.svg" style=".....">
また、Safari 4 では SVG ファイルを画像として描画できますが、これは他のブラウザーで行う方法ではありません。そのため、ここで説明されているように、SVG のカスタム オーバーレイを作成することが考えられます。
それが私がこの質問をした理由です (申し訳ありませんが、HTML/javascript は私の得意分野ではありません)。
<object>また、要素を持つ透明な背景を持つ SVG をレンダリングするための Webkit には小さなバグがあるため、ブラウザーに応じて<object>orを使用する必要があります<img>(私はこれが好きではありませんが... 今のところ、それはまだ簡単です) -汚い実験)
だから私はこのコードから始めました（まだ進行中です）：
// create the object
function myOverlay(SVGurl, bounds)
{
this.url_ = SVGurl;
this.bounds_ = bounds;
}
// prototype
myOverlay.prototype = new GOverlay();
// initialize
myOverlay.prototype.initialize = function(map)
{
// create the div
var div = document.createElement("div");
div.style.position = "absolute";
div.setAttribute('id',"SVGdiv");
div.setAttribute('width',"900px");
div.setAttribute('height',"900px");
// add it with the same z-index as the map
this.map_ = map;
this.div_ = div;
//create new svg root element and set attributes
var svgRoot;
if (BrowserDetect.browser=='Safari')
{
// Bug in webkit: with <objec> element, Safari put a white background... :-(
svgRoot = document.createElement("img");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px");
svgRoot.setAttribute("src", "test.svg");
}
else //if (BrowserDetect.browser=='Firefox')
{
svgRoot = document.createElement("object");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px;");
svgRoot.setAttribute("data", "test.svg");
}
div.appendChild(svgRoot);
map.getPane(G_MAP_MAP_PANE).appendChild(div);
//this.redraw(true);
}
...
関数はdrawまだ書かれていません。
私はまだ問題を抱えています (どこでも読んだり学んだことのおかげで、また私の質問に答えてくれる人々のおかげで、私はゆっくりと進歩しています)。
さて、問題は次のとおりです。<object>タグを使用すると、マップをドラッグできません。要素全体<object>で、マウス ポインターはマップをドラッグするための「手のアイコン」ではなく、通常のポインターです。
そして、これを修正する方法が見つかりませんでした。新しいマウス イベントを追加する必要があります (クリックまたはダブルクリックの追加時にマウス イベントが表示されましたが、マップのドラッグでは表示されませんでした...) ?
または、ドラッグ機能を維持するためにこのレイヤーを追加する別の方法はありますか?
コメントと回答ありがとうございます。
PS: 私も SVG の要素を 1 つずつ追加しようとしていますが、実際には... DOM ツリーにそれらを追加する方法がわかりません。この例では、SVG が で読み取られて解析され、指定さGXml.parse()れたタグ名を持つすべての要素が取得され ( xml.documentElement.getElementsByTagName)、SVG ノードに追加されます ( svgNode.appendChild(node))。しかし、私の場合は、SVG/XML ツリーを直接追加する (すべての要素を追加する) 必要があり、さまざまなタグ ( <defs>、<g>、<circle>、<path>など) があります。もっと簡単かもしれませんが、やり方がわかりません.. :(