我一直在尝试创建一个与此处示例不太相似的圆环图:https://jsfiddle.net/4azpfk3r/
HTML:
<div class="item html">
<h2>HTML</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
<div class="item css">
<h2>CSS</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
</g>
</svg>
</div>
CSS
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}
.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}
@-webkit-keyframes html {
to {
stroke-dashoffset: 80;
}
}
@keyframes html {
to {
stroke-dashoffset: 80;
}
}
@-webkit-keyframes css {
to {
stroke-dashoffset: 160;
}
}
@keyframes css {
to {
stroke-dashoffset: 160;
}
}
但是,在上面的示例和我修改后的版本中,我都无法在 IE 11 和 Edge 中运行它们。我相当确定这是由于 stroke-dashoffset 上的动画所致,但我不确定是否有任何解决方法。
注意:我已经尝试按照一些类似问题的建议添加下面的行,但这不会改变行为
<meta http-equiv="X-UA-Compatible" content="IE=edge">
最佳答案
IE11 不支持 SVG 元素的 CSS 动画。因此,如果您想支持非 Edge IE,则需要使用不同的方法。
但是自 build 10240 起,Edge 就支持 SVG 元素的 CSS 动画。
您的动画在 Edge 上不起作用的原因是因为 Edge 坚持要求您包含具有 CSS 值的单位。其他浏览器对 SVG 值更为宽容。
因此,要修复,请将 px
添加到所有 dasharray 和 dashoffset 值中。
.circle_animation {
stroke-dasharray: 440px;
stroke-dashoffset: 440px;
}
@keyframes html {
to {
stroke-dashoffset: 80px;
}
}
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440px;
stroke-dashoffset: 440px;
}
.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}
.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}
@-webkit-keyframes html {
to {
stroke-dashoffset: 80px;
}
}
@keyframes html {
to {
stroke-dashoffset: 80px;
}
}
@-webkit-keyframes css {
to {
stroke-dashoffset: 160px;
}
}
@keyframes css {
to {
stroke-dashoffset: 160px;
}
}
<div class="item html">
<h2>HTML</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
<div class="item css">
<h2>CSS</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
</g>
</svg>
</div>
关于css - 内嵌动画 SVG 无法在 IE/Edge 中加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46994969/