CSS背景图像*.svg动画不起作用
我有动画svg文件,我想用它作为div的背景图像CSS背景图像*.svg动画不起作用,css,html,animation,svg,background,Css,Html,Animation,Svg,Background,我有动画svg文件,我想用它作为div的背景图像 div { background-image: url('anim.svg'); } 图像显示,但动画不起作用 另外,我不能在html中使用svg对象,因为我有很多类似的对象,svg对象的代码也不短 UPD:svg文件代码: <?xml version="1.0" encoding="utf-8"?> <svg height="69" width="62" class="hexagon" xmlns="http://w
div { background-image: url('anim.svg'); }
图像显示,但动画不起作用
另外,我不能在html中使用svg对象,因为我有很多类似的对象,svg对象的代码也不短
UPD:svg文件代码:
<?xml version="1.0" encoding="utf-8"?>
<svg height="69" width="62" class="hexagon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="30 0, 60 16, 60 50, 30 68, 0 50, 0 16" style="fill: none; stroke:#fff;stroke-width:1" />
<polygon points="33 3, 33 3" style="fill: none; stroke:#fff;stroke-width:1">
<animate attributeName="points" dur="500ms" to="33 3, 59 48" fill="freeze" />
</polygon>
<polygon points="28 2, 28 2" style="fill: none; stroke:#fff;stroke-width:1">
<animate attributeName="points" dur="500ms" to="28 2, 0 49" fill="freeze" />
</polygon>
<polygon points="3 51, 3 51" style="fill: none; stroke:#fff;stroke-width:1">
<animate attributeName="points" dur="500ms" to="3 51, 57 51" fill="freeze" />
</polygon>
</svg>
您可以使用svg:use来重复类似的对象,例如:
<svg>
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
</svg>
此代码将呈现相同的对象:
<svg>
<use xlink:href="#shape" x="200" y="50" />
</svg>
请将anim.svg的标记添加到问题斯拉瓦,谢谢。有没有办法将HTML放入svg中?据我所知,您还不能将动画svg用作实际图像。背景图像是当前不可设置动画的属性,因此无法使用。希望我错了。这会很有趣。这应该可以工作,不幸的是,UAs在这里仍然有点问题。