CSS背景图片* .svg动画不工作 [英] CSS background image *.svg animated does not working

问题描述

我有动画svg文件，我想使用它作为div的背景图片

  div {background-image：url （'anim.svg'）; } 
  

图片显示，但动画无效。

$ b b p PS我不能在html中使用svg-object，因为我有很多类似的对象，并且svg-object的代码不是很短。

UPD：svg-file code ：

 <？xml version =1.0encoding =utf-8？& 
< svg height =69width =62class =hexagonxmlns =http://www.w3.org/2000/svgxmlns：xlink =http：// www。 w3.org/1999/xlink\"> 
< polygon points =30 0，60 16，60 50，30 68，0 50，0 16style =fill：none; stroke：#fff; stroke-width：1/> 
< polygon points =33 3，33 3style =fill：none; stroke：#fff; stroke-width：1> 
< animate attributeName =pointsdur =500msto =33 3，59 48fill =freeze/> 
< / polygon> 
< polygon points =28 2，28 2style =fill：none; stroke：#fff; stroke-width：1> 
< animate attributeName =pointsdur =500msto =28 2，0 49fill =freeze/> 
< / polygon> 
< polygon points =3 51，3 51style =fill：none; stroke：#fff; stroke-width：1> 
< animate propertyName =pointsdur =500msto =3 51，57 51fill =freeze/> 
< / polygon> 
< / svg> 
  

解决方案

您可以使用svg：use重复类似的对象，例如：

 < svg> 
< defs> 
< g id =shape> 
< rect x =50y =50width =50height =50/> 
< circle cx =50cy =50r =50/> 
< / g> 
< / defs> 
< / svg> 
  

此代码将呈现相同的对象：

 < svg> 
< use xlink：href =＃shapex =200y =50/> 
< / svg> 
  

I have animated svg file and i want to use it as background image for div

div { background-image: url('anim.svg'); }

Image displays but animations doesn't work.

P.S. I can't use svg-object in html because i have a lot of similar objects and code of svg-object is not to short.

UPD: svg-file code:

    <?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> 

解决方案

You can use svg:use to repeat the similar objects, e.g:

<svg>
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>
</svg>

This code will render the same object:

<svg>
  <use xlink:href="#shape" x="200" y="50" />
</svg>

这篇关于CSS背景图片* .svg动画不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！