1

svg/javascript プログラミングの助けが必要です。要素「Stern」が で回転する SVG グラフィックを作成しましたonmouseover-event。svg アニメーションの使用は許可されておらず、アニメーションは JavaScript で行う必要があります。私の考えは を使用することsetAttribute("transform",...)ですが、とにかくうまくいきません。私は約1時間グーグルで検索しましたが、何も見つかりませんでした。関数 stern_rotieren はマウスによってトリガーされ (私は でテストしましたalert("test")) setAttribute("fill","white")、同じ関数で完全に動作します。しかsetAttribute("transform",...)機能しません。私の失敗を見せてくれるかもしれません、私は必死です。

<defs>
    <script type="text/javascript">

        other functions

        function stern_rotieren(){
            var stern=document.getElementById("Stern");
            stern.setAttribute("transform","rotate(15 500 500)");           
        }

    </script>
    <symbol id="Baum" fill="white" stroke="green" stroke-width="5">
        <path d="M 1000,200 Q 950,400 800,500 Q 600,600 750,650 T 700,850" />
        <path d="M 700,850 Q 400,1100 600, 1100 T 500,1400" />
        <path d="M 500,1400 Q 250,1600 450,1600 L 850,1600 Q 950,1600 950,1700" />
    </symbol>
    <symbol id="Kugel" fill="red" onclick="kugel_farbe()" transform="translate(0,0)">
        <circle cx="50" cy="50" r="50" />
    </symbol>
    <symbol id="Stern" fill="yellow" onclick="stern_farbe()" onmouseover="stern_rotieren()" >
        <polygon points="200,20 80,360 380,120 20,120 320,360"/>
    </symbol>
</defs>

<use xlink:href="#Baum" transform="translate(0,250)" />
<use xlink:href="#Baum" transform="translate(2000,250) scale(-1,1)" />
<use xlink:href="#Kugel" transform="translate(850,1050)" />
<use xlink:href="#Kugel" transform="translate(1050,750)" />
<use xlink:href="#Kugel" transform="translate(1200,1250)" />
<use xlink:href="#Kugel" transform="translate(700,1650)" />
<use xlink:href="#Kugel" transform="translate(1300,1700)" />
<use xlink:href="#Stern" transform="translate(800,185)" />
<use xlink:href="#Stern" transform="translate(970,900) scale(0.5)" />
<use xlink:href="#Stern" transform="translate(800,1300) scale(0.5)" />

4

1 に答える 1

1

シンボル要素は変換属性を受け入れません。たとえば、子ポリゴン要素に変換属性を設定すると機能します。

于 2012-12-17T20:39:45.073 に答える