SVG动画对角线检视框

Question

我希望能够进行如下设计：

https://www.reddit.com/r/webdev/comments/bromkj/ello_everyone_this_is_a_ui_i_made_in_adobe_xd/

您可以在以下位置找到我的网站：https://desertsunstudio.com

它的基本设置是在橙色HTML和正文的顶部，在不同的z索引上具有两个固定的SVG。

html, body{
  margin: 0;
  padding: 0;
  font-family: "Oxygen", "Arial", sans-serif;
  background-color: #A36D00;
} 

#left-panel{
  position: fixed;
  z-index: 3;
  animation-name: left-panelmove;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

#right-panel{
  position: fixed;
  z-index: 4;
  animation-name: right-panelmove;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

运行此动画时，您可以看到SVG被遮盖为矩形：

@keyframes right-panelmove {
    from {transform: translate(0, 0);}
    to {transform: translate(15%, 10%);}
}

@keyframes left-panelmove {
    from {transform: translate(0, 0);}
    to {transform: translate(-15%, -10%);}
}

不过，您会看到我的SVG上的黑色方块比画板上的要大得多。

我想知道我是否可以对这段代码做任何事情，以使SVG一直对角地在屏幕上一直运行，尤其是在视图框上。

<svg version="1.1" id="ab9dac86-5d7c-460b-b35e-9ae3db46aedc"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080"
     style="enable-background:new 0 0 1920 1080;" xml:space="preserve">

Answer 1

@keyframes right-panelmove {
    from {transform: translate(0, 0);}
    to {transform: translate(15%, 10%);}
}

@keyframes left-panelmove {
    from {transform: translate(0, 0);}
    to {transform: translate(-15%, -10%);}
}

.left-panelmove{
  animation-name: left-panelmove;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

.right-panelmove{
  animation-name: right-panelmove;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

我将@keyframes和类移到了SVG样式标签内的适当SVG（左右）上，效果很好。