Skip to content

Instantly share code, notes, and snippets.

@Nonagod

Nonagod/SVGCursorPosition.md

Last active October 12, 2021 07:48
Show Gist options
  • Save Nonagod/586d0070d3370988d3a0aded474c37d8 to your computer and use it in GitHub Desktop.
Save Nonagod/586d0070d3370988d3a0aded474c37d8 to your computer and use it in GitHub Desktop.
Download ZIP
Determining of mouse cursor coordinates relative svg viewBox. #js #javascript #cursor #coords #coordinates #mouse #svg
Raw
SVGCursorPosition.md

What is it?

There is a problem with determining the coordinates of a mouse cursor relative to the svg element. This gist shows a way to solve it.

What's a problem?

There are two parts to the problem:

  1. Different reference points for coordinates

The mousemove event counts coordinates relative to the upper-left corner of the browser viewport. Whereas we want the position relative to the element on the page.

  1. SVG viewBox may differ from the size of the element on the page

The arrangement of elements inside the svg have their own coordinate system relative to the viewbox. Also, the canvas itself may differ in size and have offset from the DOM element it contains.

How to fix it?

Use this function to get the coords of a mouse cursor

/**
 * @param SVGElement - DOMElement of svg block
 * @param MoveMouseEvent - object of mouse move event
 * @returns {{x: number, y: number}}
 */
function getMouseCoordinatesRelativelySvgElement( SVGElement, MoveMouseEvent ) {
    // get a sizes and position of svg element, relative browser viewport (page piece, showed on a screen, which we can see)
    let svg_element_position = SVGElement.getBoundingClientRect(),
        // difference coefficients between HTML element and svg viewbox sizes.
        svg_sizes_factor = {
            x: SVGElement.viewBox.baseVal.width / svg_element_position.width,
            y: SVGElement.viewBox.baseVal.height / svg_element_position.height
        };

    // calculates the position of the cursor relative to the svg viewbox.
    return {
        x: Math.round( (MoveMouseEvent.clientX - svg_element_position.x) * svg_sizes_factor.x + SVGElement.viewBox.baseVal.x ),
        y: Math.round( (MoveMouseEvent.clientY - svg_element_position.y) * svg_sizes_factor.y + SVGElement.viewBox.baseVal.y )
    };
}

Examples

The getMouseCoordinatesRelativelySvgElement function must be defined.

<main style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
    <div style="width: 500px; height: 500px; border-radius: 10px; padding: 10px; background-color: #566573;">
        <svg id="test" viewBox="10 10 100 100">
            <rect  width="100%" height="100%" fill="#000" />
            <rect mask="url(#myMask)" width="100%" height="100%" fill="#fff" />

            <filter id="blurMe">
                <feGaussianBlur stdDeviation="1"/>
            </filter>

            <mask id="myMask">
                <rect fill="#fff" width="100%" height="100%" />
                <image filter="url(#blurMe)" id="myMask_cloud" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4QBWRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAITAAMAAAABAAEAAAAAAAAAAAEsAAAAAQAAASwAAAAB/+0ALFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAPHAFaAAMbJUccAQAAAgAEAP/hDIFodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvADw/eHBhY2tldCBiZWdpbj0n77u/JyBpZD0nVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkJz8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0nYWRvYmU6bnM6bWV0YS8nIHg6eG1wdGs9J0ltYWdlOjpFeGlmVG9vbCAxMC4xMCc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczp0aWZmPSdodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyc+CiAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICA8dGlmZjpYUmVzb2x1dGlvbj4zMDAvMTwvdGlmZjpYUmVzb2x1dGlvbj4KICA8dGlmZjpZUmVzb2x1dGlvbj4zMDAvMTwvdGlmZjpZUmVzb2x1dGlvbj4KIDwvcmRmOkRlc2NyaXB0aW9uPgoKIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PScnCiAgeG1sbnM6eG1wTU09J2h0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8nPgogIDx4bXBNTTpEb2N1bWVudElEPmFkb2JlOmRvY2lkOnN0b2NrOmY4NzJmYmQ4LWNjMjctNDgxYi05Yzg2LTQzNGJhOTRiMzkwYTwveG1wTU06RG9jdW1lbnRJRD4KICA8eG1wTU06SW5zdGFuY2VJRD54bXAuaWlkOjMyMTAzMTVkLWVkMjYtNDc2YS1hZTIyLTUxZjkzNmE0Y2MzZTwveG1wTU06SW5zdGFuY2VJRD4KIDwvcmRmOkRlc2NyaXB0aW9uPgo8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSd3Jz8+/9sAQwAFAwQEBAMFBAQEBQUFBgcMCAcHBwcPCwsJDBEPEhIRDxERExYcFxMUGhURERghGBodHR8fHxMXIiQiHiQcHh8e/8AACwgBaAIiAQERAP/EAB0AAQABBQEBAQAAAAAAAAAAAAAEAgMFBgcBCAn/xAA+EAABAwMDAgUCBQIFAgUFAAABAAIDBAURBhIhMUEHEyJRYRRxCCMygZEVQqGxwdHhFlIkJTND8DRUcoLx/9oACAEBAAA/APstEREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREReOc1rS5zg0DuSrdPUQVDS6CaOVrTgljg4A+3CuoiIiIosdwoZI5JGVcBZG7a87xhp6c+ylAgjIPCIiIiplkjiaXSSNY0dS44CtUlXS1bXOpqiKYNOHFjgcFX0REREREREREREREREREREREREREREUe4VtLQUklXWVEcEETdz3yODQB9ytat3iRoqvq30lNf6Z1Qx7YzGQ4HcRkY45+44W25GMhQL3dae0259dO2SSNhGRGNzv4XOtc+M9osdjpbvaqT+rU0zsPeJvLEZGMgjBOcZWkXL8RdnudvqqcxOt0ckZEMrJN73O6YILcAcrklu8RJ6K+Or7Xd5KOcPy0GXAP37H7FdH0d+JSWhq6in1bSmuidtdDNSbWuYMcgg8Oz17LoNi8cLNX1VVGIXyRCUGnl4j3RnnDgT+odOOD8Lotm1PZLtOKahro5KjYHui/uaD2PbPX+FmUUCpu1HFSyztlZN5ZLdkbwXEg4I/lapeNYuMDY2R+QXDD+cnn2PZaVqfxBraOidTOrX4cC1gBGcdiT1wtX0lqGuqoZ3yvY5kjyHZPQDoVuGndUvhmlZTVkh2naXZ4I+yvXbVNXFP9XHXyiZoDXDdxj5H7LoWjL6y+UBl3EyM/UQAGnPss+i8cQ1pceABkrVNRaoonU0kFuuERl/vcwnIHwei49rnVH9NqI6gVM0gdlr3OOeT3UnR2p9tYyuoasPcWFpe44P7juFvVF4jlwc15gmew7SAMZPvx0Wy2zWNvqhGJI5InObk49QB/wA1er9XWWkk8ozmWTJGGDpj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" width="60" height="40"/>
            </mask>

            <text x="18%" y="60%" stroke="#52BE80" font-size="28" fill="#212F3C" stroke-width="2" filter="url(#blurMe)">Cloud</text>
            <text x="17%" y="60%" stroke="#EC7063" font-size="28" fill="#212F3C" stroke-width="2">Cloud</text>
            <text x="18%" y="60%" stroke="#52BE80" font-size="28" fill="#212F3C"  stroke-width="2" mask="url(#myMask)">Cloud</text>
        </svg>
    </div>
</main>



<script>
    document.getElementById('test').addEventListener('mousemove', (e) => {
        let cloud = document.getElementById('myMask_cloud'),
                coords = getMouseCoordinatesRelativelySvgElement( document.getElementById('test'), e );

        cloud.setAttribute( 'x', coords.x - 20 + "" );
        cloud.setAttribute( 'y', coords.y - 20 + "" );
    });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment