Библиотека jquery-svg специально предназначена для облегчения этого: http://keith -wood.name / svg.html
Если вы хотите избежать использования библиотеки, то есть несколько основных начальных проблем и решений, которые вам необходимо рассмотреть.
Сначала вам нужно указать, как вы встраиваете SVG. SVG может быть включен в XHTML «inline» в большинстве современных браузеров. Во-вторых, и чаще всего вы можете встраивать документ SVG, используя HTML-код для вставки или тег объекта.
Если вы используете первый подход, то вы можете использовать элемент HTML-сценария в главном HTML-документе для импорта jQuery, и тогда ваши сценарии в HTML-документе должны иметь возможность легко и легко получать доступ к элементам во встроенном документе SVG. как и следовало ожидать.
Если, однако, вы используете второй подход и встраиваете SVG с использованием объекта или элемента встраивания, то вам нужно принять еще несколько решений. Сначала вам нужно решить, следует ли импортировать jQuery в
- контекст встраивания HTML с использованием элемента HTML-сценария с использованием элемента HTML-сценария или
- встроенный контекст SVG с использованием элемента сценария SVG внутри документа SVG.
Если вы используете последний подход, то вам нужно будет использовать более старую версию jQuery (я думаю, что 1.3.2 должен работать), так как в более новых версиях используется обнаружение функций, что нарушает SVG-документы.
Более распространенный подход - импортировать jQuery в основной HTML-документ и извлекать узел SVG из встроенного контекста. Однако вам следует быть осторожным с этим подходом, поскольку внедренный документ SVG загружается асинхронно, и поэтому для получения элемента хоста необходимо установить прослушиватель загрузки для тега объекта. Полное описание того, как извлечь элемент документа из внедренного документа SVG из HTML, см. В следующем ответе: Как получить доступ к элементам SVG с помощью Javascript
Когда у вас есть корневой documentElement внедренного документа SVG, вам нужно будет использовать его в качестве узла контекста при выполнении запросов с помощью jQuery во встраиваемом HTML-документе. Например, вы можете сделать следующее (не проверено, но должно работать):
<html>
<head>
<title>SVG Illustrator Test</title>
<script src="jQuery.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("alphasvg");
//it's important to add an load event listener to the object, as it will load the svg doc asynchronously
a.addEventListener("load",function(){
var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg
var svgRoot = svgDoc.documentElement;
//now we can query stuff with jquery like this
//note that we pass in the svgRoot as the context node!
$("foo bar",svgRoot);
},false);
})
</script>
</head>
<body>
<object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
</body>
</html>