Geek Answers Handbook

Mouse events on svg path bounding box

I'm interested in mouseover, mouseout, click on boundingbox events of the svg path. For example, given this code:

<!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>

the circle changes the fill color when you enter and exit it, whereas I would like it to change color if you hover over its frame. I already tried below and it does not work:

<!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>

I am not interested in using an external library for this task.

+5
source share
2 answers

You can also use pointer-events="boundingBox"(see SVG Tiny 1.2 ) in the path element to get mouse events detected on bounding memory instead of on the path itself.

boundingBox Opera, AFAIK. , .

+6
function bbox(e)
        {       
            if (e && e.getBBox && e.getAttributeNS)
            {   
                var box = e.getBBox();
                var transform = e.getAttributeNS(null, 'transform');
                if (box.x && box.y && box.width && box.height && 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;
        };
+2

More articles:


All Articles