SVG 动画、图层和渲染顺序

Question

所以我有一个类似这样的 SVG：

<svg>

<g id='leftArm'>
  <shapes for upper arm>
  <circle id='leftShoulderPivot' />
  <g id="leftForearm'>
    <shapes for lower arm>
    <circle id='leftElbowPivot' />
    <circle id='leftWristPivot' />
    <g id='leftHand'>
        <shapes for left hand>
    </g>
  </g>
</g>

<g id='torso'>
  <shapes>
</g>

</svg>

这允许我使用适当枢轴的 cx 和 cy 值作为旋转原点来旋转手臂、前臂和手组。万岁！

但是，我希望前臂形状在躯干形状下方渲染，而手部形状在躯干形状上方渲染。同样，当您向下旋转手臂时，手会移到躯干后面。

所以我正在寻找两种解决方案之一：

a) 一种改变现有 SVG 渲染顺序的方法，使前臂先渲染，手最后渲染

b) 一种将手组移出手臂组的方法，同时仍保持手组的 x、y 和旋转等于手腕枢轴

理想情况下，我希望在 SVG 中执行此操作，而不是依赖外部 javascript。我可以编写 javascript 来在其他 javascript 移动手臂时固定手的位置，但是我将无法将 SVG 动画用于“空闲动画”循环等。

谢谢！

Answer 1

您的想法应该可行……如下所示。无法在 IE 中运行。

<svg viewBox="0 0 10 10" width="200" height="200">
<defs>
<style type="text/css">
path {fill: none; stroke: #000; stroke-width:.2;}
rect {fill: #999;}

#human {
  animation: sway 2s ease alternate infinite;
}

#arm-left-upper {
  animation: upanddown 4s ease alternate infinite;
  transform-origin: 0% 0%;
}

#arm-left-lower {
  animation: upanddown 3s ease alternate infinite;
  transform-origin: 0% 0%;
}

#arm-left-hand {
  animation: wave 1s ease alternate infinite;
  transform-origin: 100% 0%;
}

@keyframes sway {
  0% { transform: translateX(0); } 
  100% { transform: translateX(2px); } 
}

@keyframes upanddown {
  0% { transform: rotate(-30deg) } 
  100% { transform: rotate(30deg); } 
}

@keyframes wave {
  0% { transform: rotate(-80deg) } 
  100% { transform: rotate(20deg); } 
}
</style>
</defs>

  <g id="human">

    <g id="arm-left">
      <g id="arm-left-upper">
        <path d="M4 2l1 1"/>

        <g id="arm-left-lower">
          <path d="M5 3v1"/>

          <g id="arm-left-hand">
            <path d="M5 4h-.3"/>
          </g>
        </g>

      </g>
    </g>

    <g id="torso">
      <rect x="2" y="1.8" width="2" height="3"/>
    </g>

  </g>


</svg>