# Custom Elements: Extend SVG - Real coordinates on mouse events

**URL:** <https://discourse.elm-lang.org/t/custom-elements-extend-svg-real-coordinates-on-mouse-events/1762>\
**Category:** Learn\
**Created:** [August 27, 2018, 4:11pm UTC](https://discourse.elm-lang.org/t/custom-elements-extend-svg-real-coordinates-on-mouse-events/1762 "2018-08-27T16:11:07Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Atlewee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/atlewee/32/4603_2.png) [@Atlewee](https://discourse.elm-lang.org/u/Atlewee)\
**Post date:** [August 28, 2018, 5:02am UTC](https://discourse.elm-lang.org/t/custom-elements-extend-svg-real-coordinates-on-mouse-events/1762/4 "2018-08-28T05:02:44Z")

</div>

Thanks, I did not know that I could fire Custom events and listen to them in Elm.

Using the same logic as for the port, but now listening for Events.on “mousemoveWithCoordinates” in Elm:

```auto
        let svg = document.getElementsByTagName('svg')[0]
        if (svg) {
            let point, position
            svg.addEventListener('mousemove', (e) => {
                point = svg.createSVGPoint()
                point.x = e.clientX
                point.y = e.clientY
                position = point.matrixTransform(svg.getScreenCTM().inverse())

                let event = new CustomEvent("mousemoveWithCoordinates", { detail: position })
                svg.dispatchEvent(event)
            })
        }

```

---

_[View the full topic](https://discourse.elm-lang.org/t/custom-elements-extend-svg-real-coordinates-on-mouse-events/1762)._