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

问题描述：

我试图用CSS动画SVG圆的半径属性。同时（使用Firefox Inspect Element工具），我可以看到动画本身已设置并正确运行，“.innerCircle”的大小没有明显改变。使用CSS动画调整SVG圆半径的大小

如果你能发现任何我明显错过的东西，或者以任何方式提供帮助，我会非常感激。我对此很新，所以如果我对这个错误有所了解，请善良！

我粘贴下面的文件以供参考。

再次感谢。

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.0规范在地平线上的解决方案表明，大多数属性成为CSS属性（主要是因为用例像你这样不工作）。 Chrome已经实现了这一点，以检查它是否可能是您的动画在那里运行的原因。在未来的某个时候，Firefox和Safari也可能实现这个SVG 2功能。

“SVG的SMIL动画（，等）已被取消，将被删除，请使用CSS动画或Web动画来代替。”我的控制台 – krummens

@ krummens据推测，未来的Chrome更新会在他们改变主意时删除该弃用警告。 –

认真吗？我做了很多关于不能使用的想法，而且这很糟糕。所以我做了所有这些都没有？ – krummens

答

有一个简单的选择：动画元素缩放而不是圆半径。

由于传统原因，SMIL动画已被弃用且仅由浏览器支持。它可能在将来被丢弃，并且永远不会出现在Edge或未来的某些浏览器中。

@keyframes buttonTransition { 
 
    from { 
 
     transform: scale(0.2); 
 
    } 
 
    to { 
 
     transform: scale(1); 
 
    } 
 
} 
 

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

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

SMIL动画可能会被弃用，但至少有一个适用于IE的polyfill。我知道IE中没有CSS动画的polyfill。 –

@RobertLongson这是2017年。谁在乎IE？ Edge很快就会超过它的声望。此外，CSS动画是IE10 +，目前还没有人支持11以下的IE。 – Evgeny

IE的任何版本都不支持SVG元素上的CSS转换，并且根据[this]（https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6820655-add-css-transforms-on- svg-elements），它在Edge中也不受支持。 –

答

如果有人还在寻找到如何做到这一点，我发现了一个实心圆一个很好的解决方案，而无需使用SMIL。这个解决方案有点破解，它只适用于有固体填充的圆圈。基本上我所做的就是将这些圆圈的笔画宽度设置为动画效果，使其看起来好像在不断增长。

我原来的圈子

<circle cx="46" cy="46" r="2.8"/>

对于这个工作我设置了圆的半径是接近接近0。

<circle cx="46" cy="46" r="0.01"/>

然后设置笔划宽度是原始半径的量的两倍，最后设置的笔划宽度的动画。

@keyframes circle_animation { 
    from { 
     stroke-width: 0; 
    } 
} 

circle { 
    stroke-width: 5.6; 
    animation: circle_animation .5s linear infinite; 
}

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

相关推荐