bumbu/svg-pan-zoom

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

Open

#52 建立於 2014年7月24日

在 GitHub 查看
 (11 留言) (0 反應) (0 負責人)JavaScript (1,585 star) (383 fork)batch import
bughelp wanted

描述

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.

貢獻者指南

技術棧
javascript
領域
frontend
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-3 hours
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
stale
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
needs investigation
前置要求
basic SVG knowledgefamiliarity with <use> and <symbol>access to a browser
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
30
研究方向
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.