多个SVG变焦并同时平移

Question

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

Answer 1

如果SVG内联并标记了类，则可以使用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);}
}