SVG-тег 'def' не работает с событиями JS - PullRequest
Новая
       30

SVG-тег 'def' не работает с событиями JS

2 голосов
/ 01 декабря 2010

Все,

У меня небольшая проблема с событиями JavaScript, связанными с тегом SVG 'defs' в Firefox 3.6 и Firefox 4.0b.

У меня есть изображение на холсте SVGзаключено в теги 'defs'Теперь у меня есть событие, прикрепленное к курсору, где курсор дает координаты при наведении курсора мыши на изображение.Это хорошо работает в Chrome, Safari и Opera, но не в браузерах Firefox.В Firefox ошибка не отображается, просто появляется сообщение о том, что координаты не отображаются с движением курсора.

Любые советы и предложения?

Редактировать: Эрик, спасибо за ответ.Извиняюсь за ошибку, я имел ввиду тег 'defs'.вот код: 

var cur= svgDoc.getElementById("BackDrop1")
        cur.setAttribute("stroke-width","1" )
            zain.setAttribute("stroke","black")
            zain.setAttribute("fill","purple")
            zain.setAttribute("stroke","black")
            zain.setAttribute("opacity","0.3")
            zain.setAttribute("pointer-events","all")

      cur.onmousemove=function(event)
        {

            x=event.pageX-320
            y=event.pageY-330
            if(x>0 && y<0)
            {
                document.getElementById("x").value=x
                document.getElementById("y").value=y*(-1)
            }else
                if(x<0 && y<0)
            {
                document.getElementById("x").value=x
                document.getElementById("y").value=y*(-1)
            }else
                if(x>0 && y>0)
            {
                document.getElementById("x").value=x
                document.getElementById("y").value=y*(-1)
            }else
                if(x<0 && y>0)
            {
                document.getElementById("x").value=x
                document.getElementById("y").value=y*(-1)
            }else
                if(x==0 && y==0)
            {
                document.getElementById("x").value=x
                document.getElementById("y").value=y*(-1)
            }


        }

Stackoverflow по какой-то причине не позволяет мне пройти мимо SVG-кода.Я загрузил текстовый файл на 4shared.Надеюсь, что все в порядке.

JS & SVG определяет проблему в FF

Ответы [ 2 ]

1 голос
/ 10 января 2011

Kayote, рассмотрите возможность размещения полного файла, а не только этой части.Слишком много контекста, который отсутствует.Для начала, мы даже не видим, где значения id "x" и "y" были назначены элементам.Ошибка может быть там.

Я начал работать с содержимым svg в html-файлах на прошлой неделе, и первой проблемой, с которой я столкнулся, было изменение файла, заканчивающегося на .xml, а не .html, по крайней мере для конкретногофайл, который я создавал, позволил мне заставить работать эффекты svg на html-странице, когда эти эффекты иначе не сработали бы, несмотря на то, что они были скопированы из рабочего файла .svg.

Другая проблема, с которой я столкнулся, заключалась в том, чтобы не использовать этоNS-версия document.createElementNS для создания узла «use» [т. Е. Вы должны указать «http://www.w3.org/2000/svg" в качестве параметра для этого вызова, а не использовать стандартный вызов .createElement).

Еще одна проблема былачто по какой-то причине (которую я пока не понимаю) ansvgelement.setAttribute ("visibility", "hidden") не работал, в то время как ansvgelement.setAttribute ("style", "visibility: hidden") работал.

Существуют различные вещи, которые могли бы пойти не так, чтобы не иметь ничего общего с тем, на чем вы сосредоточены.

0 голосов
/ 01 декабря 2010

В svg нет тега <def>. Хотя есть тег <defs>. Трудно сказать, что не так, без некоторого примера кода, вы могли бы включить его здесь или опубликовать ссылку на него? Ничто внутри тега <defs> не должно отображаться напрямую, поэтому я не уверен, что вы имеете в виду.

Возможно, проблема в том, что у вас есть тег с неправильным именем (<def>) (который будет восприниматься реализациями как неизвестный тег в пространстве имен svg), и из-за которого firefox не позволяет вам ссылаться на вещи с другими элементами, например как <use>?

...