bumbu/svg-pan-zoom

Uncaught errors thrown by events targeting children of a <foreignObject> element

Open

#51 opened on Jul 16, 2014

View on GitHub
 (7 comments) (0 reactions) (0 assignees)JavaScript (1,585 stars) (383 forks)batch import
bughelp wanted

Description

I'm working on a project which requires text wrapping and the approach I'm taking here is to embed an XHTML document inside a <foreignObject> element, as below.

<g>
  <polygon points="..."></polygon>
  <foreignObject>
    <body>
      <p>Blah blah, lorem ipsum something</p>
    </body>
  </foreignObject>
</g>

Now this renders just fine, panning is functional etc. but errors are thrown by events targeting anything inside the <foreignObject> element as neither evt.target.ownerSVGElement or evt.target.correspondingElement.ownerSVGElement are defined for these elements.

I've hacked in a "fix" which walks up the document tree until they are defined, but I doubt (in my limited experience with SVG/XML) that's a valid approach for much outside of a narrow use case so there's no pull request here.

Contributor guide

Tech stack
javascripthtml
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Basic knowledge of SVG DOMEvent handling in JavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Examine the event handling code in svg pan zoom.js, specifically where it accesses evt.target.ownerSVGElement. The issue occurs when events target elements inside a <foreignObject>, which are not direct SVG children. A robust fix would involve traversing the DOM tree upward until an SVG element is found, e.g., using evt.target.closest('svg') or a while loop checking ownerSVGElement. Ensure the fix handles all event types and does not introduce regressions. Review the existing comments (7) for any prior attempts or suggestions.