Кажется, что «правильный» способ сделать это на самом деле - использовать SVG-элемент «use», а не изображение. Причина этого заключается в том, что интерфейс DOM элемента использования SVG определяет свойство «instanceRoot», которое позволяет получить корень «дерева экземпляров», соответствующего этому элементу использования: http://www.w3.org/TR/SVG/struct.html#InterfaceSVGUseElement
Итак, вы получите решение, которое выглядит примерно так:
circle.svg:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="4in" id="the_svg"
viewBox="0 0 4 4" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle r="1" fill="blue" stroke="none" id="the_circle"/>
</svg>
Документ, который использует корневой узел svg circle.svg:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" id="foo"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="circle.svg#the_svg"/>
</svg>
К сожалению, хотя Firefox поддерживает использование элемента use с внешними документами, в настоящее время в Webkit есть ошибка, которая не позволяет этого: https://bugs.webkit.org/show_bug.cgi?id=12499
Кроме того, Firefox, похоже, не реализует свойство instanceRoot для используемых элементов.
Так что, возможно, вам придется обойти ограничения текущих реализаций SVG. Я бы порекомендовал сделать это, используя XMLHttpRequest, чтобы загрузить документ, на который вы хотели бы связать, и импортировать DOM загруженного документа в DOM вашего основного документа. Следующий код реализует это и работает в Firefox, Opera и Chromium:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" id="foo"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script>
function fetchXML (url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function (evt) {
//Do not explicitly handle errors, those should be
//visible via console output in the browser.
if (xhr.readyState === 4) {
callback(xhr.responseXML);
}
};
xhr.send(null);
};
//fetch the document
fetchXML("http://localhost:8082/tmp/circle.svg",function(newSVGDoc){
//import it into the current DOM
var n = document.importNode(newSVGDoc.documentElement,true);
document.documentElement.appendChild(n);
var circle = document.getElementById("the_circle"); //now you have the circle
})
</script>
</svg>