Как мне добраться до якорной ссылки, если я перехватил событие onclick для масштабирования и панорамирования в SVG-документе? - PullRequest
Новая
       11

Как мне добраться до якорной ссылки, если я перехватил событие onclick для масштабирования и панорамирования в SVG-документе?

1 голос
/ 13 марта 2012

У меня есть документ SVG, в котором я использовал javascript для реализации функций масштабирования и панорамирования [адаптировано из библиотеки SVGPan Андреа Леофредди]. Сам SVG имеет элемент привязки, который должен запускать отдельный URL. Моя проблема в том, что, поскольку событие onclick было захвачено для масштабирования и панорамирования, href на якоре не достигнут. Как я могу изолировать якорь от ловушки onclick?

В приведенном ниже коде, когда я нажимаю на текст «Кухонная раковина», я хотел бы запустить прикрепленный к нему URL-адрес, а не входить в режим масштабирования и панорамирования:

Фрагменты кода:

SVGLib.js: 

...
setupHandlers(root);

function setupHandlers(root){
    setAttributes(root, {
        "onclick" : "handleClick(evt)"
    });
        root.addEventListener('DOMMouseScroll', handleMouseWheel, false); 
}


function handleClick(evt) {

    if(evt.preventDefault)
        evt.preventDefault();
    evt.returnValue = false;

    var svgDoc = evt.target.ownerDocument;
    var g = getRoot(svgDoc);

        // Get the click location
        // If key button clicked with shift key down, reset
        if (evt.shiftKey == 1) {
                setCTM(g, root.createSVGMatrix());
                shiftX = initShiftX;
                shiftY = initShiftY;
        }
        else {
                var ctm = g.getCTM();
                var ctmInv = ctm.inverse();
                var newctm = g.getCTM();
                // showMatrix('before: ', newctm);
                shiftX = shiftX - (evt.clientX - initShiftX);
                shiftY = shiftY - (evt.clientY - initShiftY);
                newctm.e = shiftX * vbCTMInv.a;
                newctm.f = shiftY * vbCTMInv.d;
                // bring in the scale factors from the vbCTMInv -- because scaling will apply automatically via the vb transform
                newctm.a = newctm.a*vbCTMInv.a;
                newctm.d = newctm.d*vbCTMInv.d;
                // showMatrix('after: ', newctm);
                setCTM(g, newctm);
        }
}

doc.html: 

<html>
...
<svg>
...
        <g id="g33" style="fill: none; stroke: green">
            <a xlink:href="/cgi-bin/qbui/drive.pl?sqlHandle=693F1DB6-6C7F-11E1-8475-31DDD99CA768">
                <text id="t2769800058" style="text-anchor: middle; font-family: Verdana; font-size: 10px" x="600" y="1300">Kitchen Sink</text>
            </a>
        </g>
...
</svg>
</html>

Обновление:

Я нашел обходной путь, который я могу использовать, чтобы определить цель события и предпринять соответствующие действия. Id - это идентификатор текстового элемента SVG, если щелкнуть «Kitchen Sink». Конечно, это требует некоторых изменений в коде, но это выполнимо.

В handleClick (): 

if (evt.target.id == ...)  {
...
}

1 Ответ

2 голосов
/ 13 марта 2012

Вы можете проверить, имеет ли значение href значение evt.target и соответствует ли оно ему 

function handleClick(evt) {
  if(evt.target.href){
    window.location = evt.target.href;
  }
...