作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
元素-6ren"> 元素-我需要一些关于 svg/javascript 编程的帮助。我制作了一个 SVG 图形,其中元素“Stern”应通过 onmouseover-event 旋转。我们不允许使用 svg 动画,动画应该由 -6ren">
我需要一些关于 svg/javascript 编程的帮助。我制作了一个 SVG 图形,其中元素“Stern”应通过 onmouseover-event
旋转。我们不允许使用 svg 动画,动画应该由 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)" />
最佳答案
符号元素不接受转换属性。例如,如果您在子多边形元素上设置变换属性,它就会起作用。
关于javascript - setAttribute ("transform",...) 不适用于 <symbol> 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13921378/
我是一名优秀的程序员,十分优秀!