如何根据嵌套元素的锚点居中 div

我有一个复杂的SVG图形，它是交互式的。在该图形中有一个特定的图标，假设它是信息图中的特定人物图标。此外，SVG 为 2000x2000 像素。这意味着在桌面(横向布局)上，它需要从顶部和底部剪掉一些可能适合它。在移动设备(纵向模式)中，它需要从右侧和左侧剪掉一些。鉴于此，我希望 SVG 以该人为中心，并在横向模式下剪辑顶部/底部，在纵向模式下剪辑左/右。这实现了两个目标：

图像始终以那个人为中心。
图像始终完全填充可用空间，无论是横向还是纵向模式。

想知道如何做到这一点。如果它必须用JavaScript完成，或者如果它可以纯粹用CSS完成。

此外，此 SVG 不能加载到 CSS 的背景图像中，因为它是交互式的。它是普通的SVG。

为了简化问题，我们可以说我们有一个包含一堆嵌套元素的<div>。我们希望这个div 基于它包含的一些嵌套元素居中。所以这似乎需要某种JavaScript。也就是说，在窗口调整大小或方向更改时，获取我们想要居中的元素的偏移量，然后弄清楚如何将其调整为居中，然后从中弄清楚如何调整 parent.parent.parent...等等，直到你到达你想要锚定的主包装器div。然后我们只需将该div 移动多少。所以这似乎需要JavaScript，但我不知道，也许有一种方法可以用普通的CSS来实现这一点。

想知道是否可以演示如何在 JS 或 CSS 中执行此操作。

这是我到目前为止所拥有的。

// 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>

请注意(https://i.stack.imgur.com/myrca.jpg)在移动设备上它如何无法正确填充空间。黑匣子应始终位于中心，并且应缩放整个 SVG 以覆盖整个视口，同时将黑匣子保持在中心。

更新：好的，通过添加媒体查询解决了"填充视口"问题。最后一件事是如何根据矩形/锚点将其居中。

要将矩形居中，您需要将其偏移一半width或height。在这种情况下，您可能需要平移矩形。这样做：

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>

试试这个：

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%);
}

相关内容

最新更新

热门标签：