html - 将整个 SVG 完美地夹在容器 div 中？

Question

我在容器中有一个 SVG 元素，如下所示:

<div class="container">
  <svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2484.44 1971.36">
  <defs>
  <style>
    .cls-1 {
      fill: none;
    }

    .cls-2 {
      clip-path: url(#clip-path);
    }

    .orange {
      fill: url(#radial-gradient);
      transform: translate(0, -100vh);
      fill: orange;
    }
  </style>
    <clipPath id="clip-path">
      <rect class="cls-1" width="100%" height="100%" />
    </clipPath>
  </defs>
     <g class="cls-2">
      <circle cx="15.05" cy="1439.67" r="15.05" />
      <circle class="orange" cx="1498.76" cy="985.68" r="985.68" />
     </g>
  </svg>
</div>

我的 CSS 是这样的:

.container {
  width: 100%;
  height: 100vh;
  background: lightgreen;
}

.svg {
  background: pink;
}

我希望能够在动画中平移我的元素而不让它们超出容器框。更具体地说，我正在为圆圈制作动画，使其从屏幕外“掉落”到框中。我已经创建了一个 svg clipPath 但我无法获得 clipPath 以匹配容器 div。

Here是描述我的问题的 fiddle 。在这种情况下，我需要粉红色区域与绿色相匹配。

这可能吗？谢谢!

Answer 1

如果您使用 viewBox在你的 SVG 中，那么你将需要不断更新它以使其与容器保持同步 <div>宽度和高度。否则它将始终以不同的方式缩放。您需要使用 javascript 并观察 onresize 事件。

或者，删除 viewBox并接受您的 SVG 比例始终为 1:1 的事实。

https://jsfiddle.net/3faz3vx6/5/