Question

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

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

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

此外，此SVG由于是交互式的，因此无法加载到CSS的背景图片中。这是普通的SVG。

为简化问题，我们可以说我们有一个<div>，其中包含一堆嵌套元素。我们希望此div基于它包含的某些嵌套元素居中。因此，这似乎需要某种JavaScript。也就是说，在调整窗口大小或方向时，获取我们要居中的元素的偏移量，然后找出如何调整要居中的元素，然后从中找出如何调整parent.parent.parent ... etc。直到您到达主包装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://imgur.com/PnugEin）在移动设备上无法正确填充空间。黑框应始终位于中心，并且应缩放整个SVG，使其覆盖整个视口，同时将黑框保持在中心。

更新：好的，可以通过添加媒体查询来解决“填充视口”的问题。最后一件事是如何基于矩形/锚点将其居中。

Answer 1

要使矩形居中，您需要将其偏移一半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>

Answer 2

尝试一下：

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

如何基于嵌套元素的锚点将div居中

2 个答案: