question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

nested svg element does not move after mousemove event

See original GitHub issue

svgcanvas.js implements the selected element’s move event, it works well on pure svg element, like <rect>, <text>… i writed a extension, it’s icon has svg elements nested in the outer svg icon, like

<svg >
  <g class="layer">
    ...
    <g id='extension' />
      <rect></rect>
      ......
      <svg >
        ...
      </svg>
    <g>
  </g>
</svg>

everything is fine when draging, while, after mouseup event, the nested element back to its initial location. Nested SVG element’s x and y attributes stay their initial value. I tried the setTranslate() method on the root svg node, it works correctly.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
brettz9commented, Sep 13, 2018

I think I was able to replicate after all, by ensuring I was in “select” mode.

1reaction
initialdmgcommented, Sep 4, 2018

Hi, @brettz9! I’ve checked PR 159 you mentioned, it’s not what i mean. I’ve create a PR to resolve this. : )

Read more comments on GitHub >

github_iconTop Results From Across the Web

<svg> element fails to move when its position is updated ...
<svg> element fails to move when its position is updated during a mouse event ... Setting the left and top attributes of an...
Read more >
Managing SVG Interaction With The Pointer Events Property
With it, we can manage which parts of an SVG document or element can receive events from a pointing device such as a...
Read more >
d3.on(“mouseover”) event does not work with nested SVG ...
I have a nested set of elements (SVG). The root element is the graph, and the children are elements in the graph (lines,...
Read more >
[Solved]-d3: unable to send mouse events to another svg element ...
Coding example for the question d3: unable to send mouse events to another svg element (event.target.__data__ is null)-d3.js.
Read more >
How to use SVGs in React | Sanity.io guide
This article will explore how to use SVG in React in three examples.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found