Вот некоторые новости (я надеюсь, что лучше разместить их здесь в ответе, вместо того, чтобы редактировать мои вопросы или создать новый вопрос. Пожалуйста, не стесняйтесь перемещать его, если это необходимо, или сообщать мне, чтобы я мог исправить):
Моя проблема заключалась в следующем:
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 не мои сильные стороны).
И так как в Webkit есть небольшая ошибка для рендеринга SVG с прозрачным фоном с элементом <object>, мне нужно использовать <object> или <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, но ... на самом деле ... я не знаю, как добавить их в дерево DOM. В этом примере SVG читается и анализируется с GXml.parse(), и все элементы с данным именем тега получаются (xml.documentElement.getElementsByTagName) и добавляются к узлу SVG (svgNode.appendChild(node)). Но в моем случае мне нужно добавить непосредственно дерево SVG / XML (добавить все его элементы), и есть разные теги (<defs>, <g>, <circle>, <path> и т. Д.). Это может быть проще, но я не знаю, как это сделать ..: (