Здравствуйте, уважаемые пользователи форума.
Исходные данные :
есть 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)?