CODEWITHSUNDEEP
javascripthtmlcsssvgd3.js
linnium
linnium

Reputation: 398

Scale SVG but nothing else?

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:

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.

Upvotes: 0

Views: 252

Answers (1)

linnium
linnium

Reputation: 398

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.

Upvotes: 1

Related Questions