bumbu/svg-pan-zoom

<use [...] /> is cut off

Open

#52 opened on Jul 24, 2014

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

Description

When I use symbols and uses to decrease the size of an svg because I use the same element multiple times I get some issues with svg-pan-zoom:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/2000/svg">
<defs>
  <symbol id="my_id">
    <circle r="10" />
  </symbol>
</defs>
<g>
  <use xlink:href="#my_id"/>
</g>
<g transform="scale(1.5)">
  <use xlink:href="#my_id" x="2000" y="1000" />
</g>

When I use this svg on a screen that has not a height of 100px and a width of 2000px the second element is not visible. In my actual project I have paths that are displayed until the screen ends, but when I pan the svg up the path is cut off.

Contributor guide

Tech stack
javascript
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.
needs investigation
Prerequisites
basic SVG knowledgefamiliarity with <use> and <symbol>access to a browser
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate how svg pan zoom handles <use> and <symbol> elements. Reproduce the issue with a simple SVG containing <use> with xlink:href pointing to a <symbol>. Check if the library's viewport calculations ignore the referenced symbol's bounding box. Look at the source code for viewport or pan handling, especially in lib/svg pan zoom.js. Consider if this issue has been fixed in later versions or if there is a workaround.