我需要一些帮助在svg / javascript编程。 我做了一个SVGgraphics,其中元素“斯特恩”应该由onmouseover-event
旋转。 我们不允许使用svganimation,animation应该由javascript来完成。 我的想法是使用setAttribute("transform",...)
,但是这不起作用。 我谷歌约一个小时,但没有发现那里工作。 函数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)" />
符号元素不接受转换属性。 例如,如果在子多边形元素上设置transform属性,它将会起作用。