Блог

Главная - Вопросы по программированию - события мыши на ограничивающей рамке svg-пути

события мыши на ограничивающей рамке svg-пути

#svg

#svg

Вопрос:

Меня интересуют события наведения курсора мыши, вывода курсора мыши, щелчка мышью в boundingbox svg-пути. Например, учитывая этот код:

 <!doctype html>
<html>
<head>
</head>
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle id="circle" cx="100" cy="50" r="40" stroke="black"
stroke-width="2" />
</svg>
<script>
    document.ready = (function()
    {   
        var circle = document.getElementById('circle');
        circle.setAttributeNS(null, 'fill', 'rgb(255,255,0)');
        circle.onmouseover = function (e)
        {
            e.target.setAttributeNS(null, 'fill', 'rgb(255,0,0)');
        };
        circle.onmouseout = function (e)
        {
            e.target.setAttributeNS(null, 'fill', 'rgb(255,255,0)');
        };
    })();
</script>
</body>
</html>

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

 <!doctype html>
<html>
<head>
</head>
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle id="circle" cx="100" cy="50" r="40" stroke="black"
stroke-width="2" />
</svg>
<script>
    document.ready = (function()
    {   
        var circle = document.getElementById('circle');
        circle.setAttributeNS(null, 'fill', 'rgb(255,255,0)');
        circle.getBBox().onmouseover = function (e)
        {
            circle.setAttributeNS(null, 'fill', 'rgb(255,0,0)');
        };
        circle.getBBox().onmouseout = function (e)
        {
            circle.setAttributeNS(null, 'fill', 'rgb(255,255,0)');
        };
    })();
</script>
</body>
</html>

Я не заинтересован в использовании внешней библиотеки для этой задачи.

Ответ №1:

Вы также могли бы использовать pointer-events="boundingBox" (см. SVG Tiny 1.2) в элементе path, чтобы получать события мыши, обнаруженные в boundingbox, а не в самом пути.

boundingBox Ключевое слово поддерживается в Opera, но пока не в других браузерах AFAIK. Чтобы заставить это работать везде, наиболее распространенным решением является добавление невидимого прямоугольника для захвата событий.

Комментарии:

1. В проекте SVG 2 значение свойства было изменено на bounding-box , и теперь оно поддерживается Chrome / Chromium

Ответ №2:

 function bbox(e)
        {       
            if (e amp;amp; e.getBBox amp;amp; e.getAttributeNS)
            {   
                var box = e.getBBox();
                var transform = e.getAttributeNS(null, 'transform');
                if (box.x amp;amp; box.y amp;amp; box.width amp;amp; box.height amp;amp; transform)
                {
                    var rect = document.createElementNS(svgns, 'rect');
                    rect.setAttributeNS(null, 'x', box.x);
                    rect.setAttributeNS(null, 'y', box.y);
                    rect.setAttributeNS(null, 'width', box.width);
                    rect.setAttributeNS(null, 'height', box.height);
                    rect.setAttributeNS(null, 'fill', 'rgba(0,0,0,0)');
                    rect.setAttributeNS(null, 'stroke', 'rgba(0,0,0,0)');
                    rect.setAttributeNS(null, 'transform', transform);              
                    e.parentNode.appendChild(rect);
                    return rect;
                }
            }       

            return null;
        };