bumbu/svg-pan-zoom

Nested svg elements

Open

#83 opened on Jan 24, 2015

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

Description

I am posting here because in stackoverflow there is no tag svgpanzoom.

I copied your inline example and entered my own svg which is generated from another application. I know there are nested svg elements. Could that be the problem. I cannot get it work. Any help is appreciated.

<html>
<head>
    <style type="text/css">body { margin: 0px; overflow: hidden; }</style>
    <script src="../dist/svg-pan-zoom.js"></script>
</head>
<body>
    <div id="content">
        <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="955">
            <g transform="translate(0,0)">
                <rect id="rectangle" class="rectangle" width="1920" height="955" style="fill: rgba(0, 0, 0, 0); cursor: move;"/>
                <svg id="container" class="container" width="1920" height="955" style="outline: red solid 1px;">
                    <g transform="translate(0,0)scale(1)">
                        <g style="stroke-linecap: round; stroke-opacity: 0.5; marker-end: url(#end); pointer-events: none;">
                            <line class="link" x1="1220.9780704135628" y1="822.811113156412" x2="1055.7886052664135" y2="1191.4763636312412" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.82700942826474px;"/>
                            <line class="link" x1="492.5672417185728" y1="1312.7065699124714" x2="1055.7886052664135" y2="1191.4763636312412" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.82700942826474px;"/>
                            <line class="link" x1="1055.7886052664135" y1="1191.4763636312412" x2="1188.5769827448617" y2="837.5421869289688" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.82700942826474px;"/>
                            <line class="link" x1="1055.7886052664135" y1="1191.4763636312412" x2="1587.242617420406" y2="1235.411337317079" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.82700942826474px;"/>
                            <line class="link" x1="271.5456102132487" y1="834.7379403617365" x2="-14.928139728399113" y2="323.06749445667754" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.00977571655289px;"/>
                            <line class="link" x1="-14.928139728399113" y1="323.06749445667754" x2="362.11893784282154" y2="433.0841868481021" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.00977571655289px;"/>
                            <line class="link" x1="-14.928139728399113" y1="323.06749445667754" x2="-4.955965558533984" y2="-137.3302112798337" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.00977571655289px;"/>
                            <line class="link" x1="1323.4429353714881" y1="1573.6893319891628" x2="1497.8646324429963" y2="1389.315706611465" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.09479601959277px;"/>
                            <line class="link" x1="1497.8646324429963" y1="1389.315706611465" x2="1152.1622812813453" y2="1554.122434328653" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.09479601959277px;"/>
                            <line class="link" x1="1497.8646324429963" y1="1389.315706611465" x2="1643.5466260158905" y2="817.3821628846783" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.09479601959277px;"/>
                            <line class="link" x1="308.74129507922726" y1="204.83368469954655" x2="91.9297030286079" y2="27.31570701028287" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.16227766016838px;"/>
                            <line class="link" x1="535.8930455286321" y1="142.08845811899621" x2="91.9297030286079" y2="27.31570701028287" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.16227766016838px;"/>
                            <line class="link" x1="91.9297030286079" y1="27.31570701028287" x2="-4.955965558533984" y2="-137.3302112798337" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.16227766016838px;"/>
                            <line class="link" x1="91.9297030286079" y1="27.31570701028287" x2="338.2550959386557" y2="-249.0411810196618" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.16227766016838px;"/>
                            <line class="link" x1="1226.40187709006" y1="936.4919639200828" x2="1365.291590306859" y2="1357.4254814913852" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.16227766016838px;"/>
                            <line class="link" x1="1081.3667604691825" y1="1578.6802024960514" x2="1365.291590306859" y2="1357.4254814913852" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.16227766016838px;"/>
                            <line class="link" x1="1365.291590306859" y1="1357.4254814913852" x2="1650.58798438556" y2="1071.73749162599" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.16227766016838px;"/>
                            <line class="link" x1="1365.291590306859" y1="1357.4254814913852" x2="1152.1622812813453" y2="1554.122434328653" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.16227766016838px;"/>
                            <line class="link" x1="987.0110626321459" y1="21.48430809231429" x2="1202.9675574820983" y2="-134.3958648908202" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.08811259537759px;"/>
                            <line class="link" x1="1202.9675574820983" y1="-134.3958648908202" x2="1189.3419230185532" y2="247.48840351620188" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.08811259537759px;"/>
                            <line class="link" x1="1202.9675574820983" y1="-134.3958648908202" x2="1057.6109895496902" y2="174.41938615310295" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.08811259537759px;"/>
                            <line class="link" x1="1202.9675574820983" y1="-134.3958648908202" x2="1275.0484402860538" y2="-554.0402190873929" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 1.08811259537759px;"/>
                            <line class="link" x1="1046.1948077794686" y1="98.51273277316672" x2="1092.3569313696148" y2="-212.21640857620216" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.00344498741272px;"/>
                            <line class="link" x1="784.0116234450652" y1="-473.4788278691162" x2="1092.3569313696148" y2="-212.21640857620216" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.00344498741272px;"/>
                            <line class="link" x1="1092.3569313696148" y1="-212.21640857620216" x2="1074.4830057316206" y2="1.038959366138147" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.00344498741272px;"/>
                            <line class="link" x1="1092.3569313696148" y1="-212.21640857620216" x2="1230.4027835480813" y2="98.0939898850441" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.00344498741272px;"/>
                            <line class="link" x1="1092.3569313696148" y1="-212.21640857620216" x2="1057.6109895496902" y2="174.41938615310295" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.00344498741272px;"/>
                            <line class="link" x1="696.5470599797059" y1="165.68317017156974" x2="722.8308528828834" y2="-194.92606158311006" style="fill: none; stroke: rgb(128, 128, 128); stroke-width: 3.07846311632667px;"/>
                        </g>
                    </g>
                </svg>
            </g>
        </svg>
    </div>

    <script>
        window.onload = function() {
            // Expose to window namespase for testing purposes
            window.zoomTiger = svgPanZoom("#container", {
                zoomEnabled: true,
                controlIconsEnabled: true,
                fit: true,
                center: true,
                viewportSelector: document.getElementById("content").querySelector("#container"),
            });
        };
    </script>
</body>
</html>

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.
half day
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
Understanding of SVG DOM
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
The issue is about nested SVG elements not working with svg pan zoom. The user provided an example with an outer SVG and a nested inner SVG with id 'container'. The library fails to enable pan/zoom on the nested SVG. To fix, investigate how the library's viewportSelector handles nested SVGs, particularly in src/svg pan zoom.js. Check if the library correctly identifies the viewport when a nested SVG is used. The maintainer has not responded, and the issue is old, so any contribution would likely need to propose a fix and discuss with the community.