Подтвердить что ты не робот

Как использовать jquery в SVG (Масштабируемая векторная графика)?

У меня встроенный SVG в моем php файле, чтобы показать карту. Я хочу использовать jquery на нем, но я понятия не имею, как связать jquery с ним. Надеюсь, что кто-то уже сделал такую вещь. Поэтому, пожалуйста, помогите по этой проблеме.

Спасибо

ИЗМЕНИТЬ

ЗДЕСЬ Я нашел полезную информацию по моему вопросу. все же мне нужно знать, как добавить CSS или ссылку на событие загрузки.

Ответ 1

Библиотека jquery-svg предназначена для этого: http://keith-wood.name/svg.html

Если вы хотите избежать использования библиотеки, то есть несколько основных исходных задач и решений, которые вам необходимо учитывать.

Сначала вам нужно указать, как вы встраиваете SVG. SVG может быть включен в XHTML "inline" в большинстве современных браузеров. Во-вторых, и, чаще всего, вы можете вставлять SVG-документ, используя тег HTML embed или object.

Если вы используете первый подход, вы можете использовать элемент HTML script в документе хоста HTML для импорта jQuery, а затем ваши сценарии в документе HTML должны иметь возможность легко обращаться к элементам встроенного документа SVG и в том виде, в котором вы ожидаете.

Если, однако, вы используете второй подход и встраиваете SVG с помощью объекта или внедряемого элемента, тогда у вас есть еще несколько решений. Во-первых, вам нужно решить, следует ли импортировать jQuery в

контекст встраивания HTML, используя элемент HTML script, используя элемент HTML script, или
встроенный SVG-контекст, используя SVG файл script внутри документа SVG.

Если вы используете последний подход, вам нужно будет использовать более старую версию jQuery (я думаю, что 1.3.2 должен работать), так как новые версии используют обнаружение функции, которое ломается на документах SVG.

Более распространенный подход заключается в том, чтобы импортировать jQuery в HTML-документ хоста и извлечь SVG node из встроенного контекста. Однако вам нужно быть осторожным с этим подходом, потому что встроенный документ SVG загружается асинхронно, и поэтому для тега объекта необходимо установить прослушиватель onload для извлечения элемента хоста. Полное описание того, как получить элемент документа встроенного документа SVG из HTML, см. В этом ответе: Как получить доступ к элементам SVG с помощью Javascript

Как только у вас есть root documentElement встроенного документа SVG, вам понадобится использовать его как контекст node, когда вы делаете запросы с jQuery во встраиваемом HTML-документе. Например, вы можете сделать следующее (непроверенное, но должно работать):

<html>
    <head>
        <title>SVG Illustrator Test</title> 
    <script src="jQuery.js"></script>
    <script>
        $(document).ready(function(){
            var a = document.getElementById("alphasvg");

            //it 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>

Ответ 2

SVG использует элементы в DOM, т.е.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600">
    <desc>My SVG</desc>
    <defs>
       <path fill="#ffffff" stroke="#ffffff" d="M100,100L100,100Z" style="fill-opacity:
        0.3; stroke-width: 1; stroke-linecap: round;" fill-opacity="0.3" 
        stroke-width="1" stroke-linecap="round">
</svg>

Доступ к нему и управление им можно сделать так же, как jQuery управляет любым другим объектом в DOM. то есть.

$('svg path').remove(); //removes the path.

Если вы ищете библиотеку javascript для управления элементами SVG, проверьте Raphael.js.