CSS背景图片* .svg动画不起作用

时间:2015-02-20 16:26:55

标签: css html5 animation svg background

我有动画的svg文件,我想用它作为div的背景图像

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

图像显示但动画不起作用。

P.S。我不能在html中使用svg-object,因为我有很多类似的对象,svg-object的代码也不会短。

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> 

1 个答案:

答案 0 :(得分:2)

您可以使用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>