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是一个描述我问题的小提琴。在这种情况下，我需要粉红色区域来匹配绿色。

这可能吗？谢谢！

Answer 1

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

或者，移除viewBox，并确保您的SVG比例始终为1：1。

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

在容器div中完美地剪切整个SVG？

1 个答案: