Question

我在SVG动画中使用旋转时遇到了一个非常烦人的问题。问题是：我有一个对象，我想沿着特定的路径移动。到目前为止它运作良好。但是如果我尝试在路径的末端旋转这个对象它就不起作用。有时我的对象会消失，因为它在视图框外面，我必须为rotate语句的x和y值尝试许多值，直到它工作。然后它只有在我将持续时间设置为0.001秒才会有效，因此它会立即旋转，因为实际上我的对象切换到视图框中更高的点并开始旋转，只有最终位置正确但你看到它向下或向上旋转在任何一点上，所以它并没有真正起作用。我不知道如何获得我需要围绕其自己的轴旋转对象的x和y值。以下是代码示例，希望您知道如何解决此问题：

<defs>
  <g id="Karte" visibility="hidden">
  <!--Karte-->
    <rect x="0" y="0" width="980" height="550" style="stroke: none; fill: rgb(189,248,137)" />
  <!--Straßen-->
    <path id="Straße1" d="M 510 0 L 510 120 0 120 0 150 980 150 980 120 540 120 540 0" style="stroke: none; fill: lightgrey" />
    <rect id="Straße2" x="0" y ="320" width="980" height="20" style="stroke:none; fill: lightgrey" />
    <rect id="Straße3" x="0" y="500" width="980" height="30" style="stroke:none; fill: lightgrey" />
    <rect id="Straße4" x="25" y="340" width="30" height="160" style="stroke:none; fill: lightgrey" />
    <rect id="Straße5" x="930" y="340" width="30" height="160" style="stroke:none; fill: lightgrey" />
    <path id="campus" d="M 515 150 L 515 170 510 170 510 300 525 300 525 320 650 320 650 300 665 300 665 170 545 170 545 150" style="stroke:none; fill: lightgrey" />
    <polyline id="rampe1" points="570,300 570,307 635,317 635,320" style="stroke-width: 1; fill:none" />
    <polyline id="rampe2" points="580,300 580,303 645,313 645,320" style="stroke-width: 1; fill:none" />
    <g id="Treppe1">
    <line x1="515" y1="153" x2="545" y2="153" stroke-width="0.5" />
    <line x1="515" y1="157" x2="545" y2="157" stroke-width="0.5" />
    <line x1="515" y1="161" x2="545" y2="161" stroke-width="0.5" />
    <line x1="515" y1="165" x2="545" y2="165" stroke-width="0.5" />
    </g>
    <g id="Treppe2">
    <line x1="525" y1="303" x2="565" y2="303" stroke-width="0.5" />
    <line x1="525" y1="307" x2="565" y2="307" stroke-width="0.5" />
    <line x1="525" y1="311" x2="565" y2="311" stroke-width="0.5" />
    <line x1="525" y1="315" x2="565" y2="315" stroke-width="0.5" />
    </g>
    <set attributeName="visibility" to="visible" begin="0s" />

  </g>
  </defs>


  <!--Figuren-->

  <defs>

    <g id="John" visibility="hidden">
    <circle cx="520" cy="100" r="5" />
    <line x1="520" y1="104" x2="520" y2="115" stroke-width="2" />
    <line x1="520" y1="104" x2="520" y2="117" stroke-width="1" />
    <polyline points="520,100 523.5,108 520,112" style="fill:none" /> 
    <polyline points="520,100 514,104 520,108" style="fill:none" /> 
    <set attributeName="visibility" to="visible" begin="0s" />
    </g>


  </defs>


    <!--Animation-->
    <use xlink:href="#Karte" />

    <use x="420" y="360" transform="rotate(90 910 490)" xlink:href="#John" >
    <animateMotion path="M 0 0 L -900 -10" begin="0s" dur="6s" fill="freeze" />
    <animateTransform  attributeName="transform" type="rotate" from="90 940 490" to="180 940 490" begin="6s" dur="0.001" fill="freeze"/>
    <animateMotion path="M-900 -10 L -900 -190" begin="6.01s" dur="3.98s" fill="freeze" />
    <animateTransform  attributeName="transform" type="rotate" from="180 970 490" to="270 970 490" begin="10s" dur="0.001" fill="freeze"/>
    <animateMotion path="M -900 -190 L -450 -190" begin="10.01" dur="4.98" fill="freeze" />
    <animateTransform  attributeName="transform" type="rotate" from="270 940 490" to="180 940 490" begin="15s" dur="0.001" fill="freeze"/>
    <animateMotion path="M -450 -190 L -390 -190" begin="15" dur="1" fill="freeze" />
    </use>



  </svg>

SVG动画旋转

0 个答案: