Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.01.2013, 17:29
Интересующийся
Отправить личное сообщение для Kosty@n Посмотреть профиль Найти все сообщения от Kosty@n
 
Регистрация: 14.04.2009
Сообщений: 17

Задача c тегом <g> в svg
Здравствуйте, уважаемые пользователи форума.

Исходные данные :
есть svg файл, в котором очень много тегов <g> и объектов(line, polyline, circle и т. д. ) в них.
Задача:
При клике по объекту(line, polyline, circle и т. д. ), обвести красной рамкой родительский тэг <g>.

Проблема
Рамке присваиваются координаты, как у тега <g>, но она оказывается смещена вправо пикселей на 50


Вот мой скрипт. Полностью файл SVG есть в архиве в приложении.
document.documentElement.onclick = function(ev) {
    lightGr(ev)
}

/* определяем элемент, с которым было произведено действие 

*/
function targetEv(ev) {
    if (ev.target) {
        var targ = ev.target
    } else if (ev.srcElement) {
        var targ = ev.srcElement
    }
    return targ
}



function lightGr(ev) {
    //определяем элемент, с которым было произвдено действие
    var targ = targetEv(ev)
    //определяем элемент <g>

    if (targ.tagName == 'g') {
        var ourEl = targ
    } else if (targ.parentNode.tagName == 'g') {
        var ourEl = targ.parentNode
    }    
    if (ourEl) {
        newW = ourEl.getBBox().width
        newH = ourEl.getBBox().height
        newTr = ourEl.getAttribute('transform')
        console.log(newW + ' ' + newH)
        var lightR = document.createElementNS("http://www.w3.org/2000/svg", "rect")
        lightR.setAttribute('transform', newTr)
        lightR.setAttribute('width', newW)
        lightR.setAttribute('height', newH)
        lightR.setAttribute('fill', 'none')
        lightR.setAttribute('stroke', 'red')
        lightR.setAttribute('stroke-width', '1px')
        console.log(ourEl)
        console.log(lightR)
        document.documentElement.appendChild(lightR)
    }
    
}


Интересуют любые предложения, предположения, мысли. Возможно данная задача решается через CSS(я смог только добавить параметр opacity к тегу g)?
Вложения:
Тип файла: zip super-svg.svg.zip (1.6 Кб, 7 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 14.01.2013, 16:09
Интересующийся
Отправить личное сообщение для Kosty@n Посмотреть профиль Найти все сообщения от Kosty@n
 
Регистрация: 14.04.2009
Сообщений: 17

Единственно возможным решением, что нашел я. Было применение opacity.
Ответить с цитированием
  #3 (permalink)  
Старый 14.01.2013, 19:08
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Kosty@n
Рамке присваиваются координаты, как у тега <g>, но она оказывается смещена вправо пикселей на 50
<style>
g {
  margin:0;
  padding:0;
}
<style>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание SVG элемента и вставка на страницу FINoM Events/DOM/Window 3 13.09.2015 16:47
Inline SVG as background Paguo-86PK Элементы интерфейса 0 16.12.2011 20:12
Простой графический движок: SVG vs Canvas stryaponoff Общие вопросы Javascript 5 29.06.2010 16:59
svg. обработка событий amigo* Элементы интерфейса 0 23.06.2010 22:31
svg поверх google map с использованием raphael amigo* Элементы интерфейса 1 16.06.2010 17:29