Интерактивный SVG через тег объекта HTML ⇐ Html

[Anonymous]

Я хочу создать интерактивную HTML-страницу SVG. Например: если я нажму на прямоугольник, я хочу отобразить новое SVG-изображение.

Поскольку мои SVG-файлы являются отдельными, я хочу включить их через тег HTML-объекта.

Я некоторое время просматривал Интернет, но мне просто не удалось обратиться к отдельным элементам моего SVG-файла, чтобы изменить их атрибуты или добавить функции и т. д.

Мой HTML-файл:

Код: Выделить всё

window.onload=function() {
// Get the Object by ID
var svgObject = document.getElementById("svg");
// Get the SVG document inside the Object tag
var svgDoc = svgObject.contentDocument;
// Get one of the SVG items by ID;
var svgItem = svgDoc.getElementById("svgID");
// Set the colour to something else
svgItem.setAttribute("fill", "lime");
};

SVG-файл:

Код: Выделить всё

Вместо использования contentDocument я также попробовал getSVGDocument(), но это тоже не сработало.

Подробнее здесь: https://stackoverflow.com/questions/372 ... object-tag