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>

SVG动画，图层和渲染顺序

1 个答案: