多个 SVG 缩放和平移一次

Question

在一个 HTML 中有一个 SVG 标签的 svg 缩放和平移。比如说，如果我有 2-3 个 SVG 正在运行覆盖层，并且想让它们同时缩放和平移，这可能吗？

Answer 1

您可以使用 CSS 来操作整个 SVG，或者如果 SVG 是内联的并用类标记的，则可以操作它的各个部分。

尝试使用 CSS 变换和动画属性...

.svg1 {
  position: absolute;
  top: 25px;
  left: 25px;
  animation: panZoom 10s linear 1;
}

@keyframes panZoom {
  0%   {transform: translateX(0) scale(1);}
  100% {transform: translateX(1000px) scale(3);}
}