html – 使用CSS动画调整SVG圆半径的大小

前端之家收集整理的这篇文章主要介绍了html – 使用CSS动画调整SVG圆半径的大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用CSS为SVG圆的半径属性设置动画.虽然(使用Firefox Inspect Element工具)我可以看到动画本身设置正确,但“.innerCircle”的大小没有明显改变.

如果你能发现任何我明显错过的东西,或者以任何方式帮助我都会非常感激.我对此很新,所以如果我错了,请善待!

我已经将我的文件粘贴在下面以供参考.

再次感谢.

styling.css:

@keyframes buttonTransition {
    from {
        r: 5%;
    }
    to {
        r: 25%;
    }
}

.innerCircle {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: buttonTransition;
}

index.html的:

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000"/>
        </svg>
    </body>
</html>

解决方法

在SVG 1.1中,圆的半径是 attribute而不是 CSS property.

CSS动画为CSS属性设置动画,不为动画属性设置动画.

这基本上是你的问题所以你不会得到CSS动画来处理目前在Firefox或Safari上的属性.如果您选择了不透明度,填充或描边等CSS属性,那么您就可以了.

SMIL动画将处理这些UA上的属性(和CSS属性).

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000">
              <animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/>
            </circle>
        </svg>
    </body>
</html>

虽然即将发布的未完成的SVG 2规范表明大多数属性都成为CSS属性(主要是因为像你这样的用例不起作用),但是有一个解决方案即将出现. Chrome已经实现了这一点,以确定它是否可能是您的动画在那里工作的原因.在未来的某个时刻,Firefox和Safari也可以实现这个SVG 2功能.

原文链接:https://www.f2er.com/html/227551.html

猜你在找的HTML相关文章