[英]setAttribute(“transform”,…) doesn't work on <symbol> element
I need some helping in svg/javascript programming. 我需要svg / javascript编程方面的帮助。 I made a SVG Graphic in which the elements "Stern" should rotating by the
onmouseover-event
. 我制作了一个SVG图形,其中元素“ Stern”应通过
onmouseover-event
旋转。 We are not allowed to use the svg-animations and the animation should be done by javascript. 我们不允许使用svg动画,动画应使用javascript完成。 My idea is to use
setAttribute("transform",...)
, but that doesn't work anyway. 我的想法是使用
setAttribute("transform",...)
,但这还是行不通的。 I google about an hour, but nothing I found there works. 我用谷歌搜索了大约一个小时,但在那儿我什么都没找到。 The function stern_rotieren is triggered by the mouse (I tested it with
alert("test")
) and things like setAttribute("fill","white")
works perfectly in the same function. 函数stern_rotieren由鼠标触发(我用
alert("test")
测试了它),诸如setAttribute("fill","white")
在同一函数中运行良好。 Only setAttribute("transform",...)
doesn't work. 仅
setAttribute("transform",...)
不起作用。 Maybe you can show me my failure, I'm desperate. 也许你可以告诉我我的失败,我很绝望。
<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)" />
symbol elements don't accept a transform attribute. 符号元素不接受转换属性。 It would work if you set the transform attribute on the child polygon element for instance.
例如,如果您在子多边形元素上设置了transform属性,它将起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.