Scale SVG but nothing else?

Question

I'm still playing around with D3 and drawing SVG elements and I decided I wanted to try making a graphic that can scale based on track pad (two-finger touch expand) and maybe a shift + scroll wheel move, but leave everything else as is. I've noticed that the entire page scales when I try these moves. Unfortunately, I have no idea how to make that work.

$('#target').html('<svg height="200" width="200"><rect width="100" height="100" x="50" y="50" fill="red" /></svg>');

#top, #bottom {
    position: fixed;
    left: 0;
    background-color: #000;
    height: 25px;
    width: 100%;
}
#target {
    margin: 25px 0;
}
#top {
    top: 0;
}
#bottom {
    bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="target"></div>
<div id="bottom"></div>

So, here are the rules I've come up with:

The DIVs at the top and bottom cannot scale. The must stay at scale factor 1.
Changing the browser dimensions will not change the scale of the SVG.
Using any method for scaling (pinch zoom, shift + scroll wheel, etc) should only effect the SVG.
Scaling the SVG so that the drawn rectangle is off of the viewport should not prevent us from scrolling or dragging to see the rest of the SVG.

Does anyone know how to make something like this work? Perhaps there is a tutorial someplace that explains this?

Thanks!

PS - I'm not apposed to using an iframe if that helps solve this.

The easiest way is to adjust the viewBox element on scroll so tht the SVG contents appears bigger/smaller. — Robert Longson, Mar 04 '15 at 19:30
it looks like you're trying to override the default browser behaviour. The browser will typically use those combination of inputs to zoom the page in it's native way. http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers may have some helpful information for you. — Ben Lyall, Mar 04 '15 at 23:45
You might try [this](http://stackoverflow.com/questions/9029469/zoom-to-an-element-jquery-svg) — Rudra, Mar 05 '15 at 13:01
Thanks. I'll have to check that out. It sounds like GetBoundingBox methods I would use in AS2 a long time ago. So far, I've found that using flex display solves an important part of my test. After that, it's a matter of controlling what scales. — linnium, Mar 05 '15 at 18:03

score 1 · Answer 1 · answered Mar 06 '15 at 23:00

So, after much experimentation, I made this work using the following:

display: flex in CSS was the best solution for making the container for the SVG take up all available space. Putting overflow: scroll on that container helps when the SVG is larger.
putting a "scroll" listener on the document and the container and preventDefault/stopImmediatePropagation when the scrollWheel value is either 120 or -120. This allows for scrolling everywhere (which is good), but you can then use this information on the container for "scaling".
use the viewBox attribute on the SVG rather than scale in CSS. If you use scale, the SVG becomes pixelated to the larger you scale it. But, adjusting the height/width of the SVG while leaving the viewBox at "0 0 [width] [height]" keeps it really sharp no matter how much you scale it.

Scale SVG but nothing else?

1 Answers1