How to center div based on anchor point of nested element
Question
I have a complex SVG graphic which is interactive. In that graphic there is a specific icon, let's say it's a specific person icon in an infographic. In addition, the SVG is 2000x2000 pixels. This means on desktop (landscape layout) it will need to clip some off the top and bottom potentially to fit it in the screen. And in mobile (portrait mode) it will need to clip some off the right and left side. Given that, I would like for the SVG to be centered on that person, and to clip the top/bottom in landscape mode and clip left/right in portrait mode. This accomplishes two objectives:
- The image is always centered on that person.
- The image always fills the available space completely, no matter if it is landscape or portrait mode.
Wondering how to do this. If it must be done with JavaScript, or if it can be done purely in CSS.
Also, this SVG can't be loaded into a background-image for CSS, since it is interactive. It is plain SVG.
To simplify the problem, we could say that we have a <div> with a bunch of nested elements. We want this div to be centered based on some nested element it contains. So it seems like this requires JavaScript of some sort. That is, on window resize or orientation change, get the offset of the element we want centered, then figure out how to adjust that to be centered, then figure out from that how to adjust the parent.parent.parent...etc. until you get to the main wrapper div you want anchored at that point. Then we just move that div by however much. So it seems like this requires JavaScript, but I don't know, maybe there is a way to accomplish this with plain CSS.
Wondering if one could demonstrate how to do this either in JS or CSS.
Here is what I have so far.
// the box should be centered in the screen
<!doctype html> <html> <head> <style> html, body { margin: 0; padding: 0; overflow: hidden; width: 100vw; height: 100vh; } svg { display: block; } @media (orientation: landscape) { svg { width: 100vw; height: auto; } } @media (orientation: portrait) { svg { width: auto; height: 100vh; } } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"> <rect width='100' height='100' x="1000" y="1000" /> </svg> </body> </html>
Notice how ( https://imgur.com/PnugEin ) on mobile it doesn't fill the space properly. The black box should always be at the center, and the whole SVG should be scaled so it covers the entire viewport, while keeping the black box at the center.
Update : Okay figured out the "filling the viewport" problem by adding media queries. The last thing is how to center it based on the rectangle / anchor point.
2 answers
solution1
0 2019-04-21 09:54:07
To center the rectangle, you need to offset it with half width or height . In this case, you may need to translate your rectangle. Do this:
html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100% }
<svg width="100%" height="100%"> <rect width='100%' height='100%' x="0" y="0" fill="yellow" /> <rect width='100' height='100' x="50%" y="50%" transform="translate(-50,-50)" fill="green" /> </svg>
solution2
0 2019-04-22 01:26:49
Try this:
svg[viewBox="0 0 2000 2000"] {
/* center the SVG in the viewport */
position: absolute;
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
margin: auto;
/* offsets from center of SVG. In the example given, it's (100/2)/2000 and then multiply by 100 because it's a percentage */
-webkit-transform: translate(-2.5%,-2.5%);
transform: translate(-2.5%,-2.5%);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.