Question

我将svg文件加载到对象标记中，我想为它设置动画。我在这里有一个简单的代码用于测试，但是有一个问题：

在我的第二个css规则中，我定位#main，这恰好是svg元素中g的id。我希望g标签可以动画，但事实并非如此。如果我将#main替换为#svgA，则可行。有谁知道如何用css3定位svg标签的内容？

由于

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>

        <style>
            /* The animation code */
            @keyframes example {
                from {
                    left:0px;
                }
                to {
                    left:100px;
                }
            }

            /* The element to apply the animation to */
            #main {
                position:relative;
                animation-name: example;
                animation-duration: 4s;
            } 

        </style>


    </head>

    <body>
        <object class="svgA" data="images/yeti/yeti-01.svg" type="image/svg+xml"></object>
    </body>

</html>

Answer 1

因为SVG是动态加载的，所以你需要从SVG本身加载样式表。尝试将此添加到您的SVG：

<?xml-stylesheet href="anim.css" type="text/css"?>

anim.css是定义CSS3动画的样式表。

Answer 2

您可以使用transform来为svg元素设置动画。

/* The animation code */
@keyframes example {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(100px);
  }
}

/* The element to apply the animation to */
#main {
  position:relative;
  animation-name: example;
  animation-duration: 4s;
}

<svg>
    <g id="main">
         <circle cx="50" cy="50" r="40" fill="red" />
    </g>
</svg>

如何在svg对象标签上使用css3动画？

2 个答案: