开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >SVG SMIL动画的行为与预期不符

问SVG SMIL动画的行为与预期不符
EN

Stack Overflow用户

提问于 2014-07-20 17:11:22

回答 1查看 80关注 0票数 1

有人知道这个SVG SMIL pie动画的中心出了什么问题吗？

http://jsfiddle.net/frank_o/fj7Xc/

它看起来像这样：

然而，它应该看起来像这样：

HTML：

<div class="svg_wrapper">
    <svg viewBox="0 0 600 425">
        <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 0,150 a 75,75 0 1,0 0,-150" fill="none" stroke="black" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000">
            <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze" />
        </path>
    </svg>
</div>

EN

回答 1

Stack Overflow用户

发布于 2014-07-21 21:46:18

在这两种浏览器中，我认为问题归结为这样一个事实，即您正在使用笔画动画技术来尝试以您想要的方式获得填充动画。

这是一个问题，因为浏览器既不能精确地计算外圆，也不能精确地计算内轴点--它们计算的是介于两者之间的官方圆，根据屏幕的分辨率对其进行舍入，然后在两边绘制笔划。由于笔划太大，圆圈边缘的小圆角效应会加剧。

不幸的是，除了使用Javascript在动画的每一帧计算出饼块的实际路径之外，我没有解决方案。

票数 2

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24852903

复制

相关文章

为什么 React Hooks useState 更新不符预期？

渲染编程算法 react javascript

不合预期的更新在定时器中，用useState使数字0做每1秒递增1，但结果不合预期：数字增加一次后便不再改变? Counter.js // Counter.js import React, { us

前端老王

2020/09/14

1.7K0

SVG - 动画制作

svg canvas html5 xml css

SVG - 动画制作 HTML5学堂：SVG - 动画制作。上一篇文章讲解了SVG的基本属性，大家能够利用SVG的基本属性进行绘制图像，那么如何让绘制好的图像动起来呢？今天要给大家分享的是SVG的动画制作，具体我们来看看下面的内容吧。接触过HTML5的人，都知道，Canvas实现一个动画，需要不断的清除画布再重新绘制，如果没有接触过Canvas也不要紧，SVG之后我们紧接着要为大家介绍的就是Canvas。SVG提供了比较方便的API接口，动画实现起来比较方便，具体看看下面的动画命令。 SVG 动画基本命

HTML5学堂

2018/03/12

3.2K0

[译]SVG动画简介

svg html javascript css

你可以把这篇文章看做通往精通SVG动画之路的第一步，里面的链接资源也是很好的学习资料。所以赶紧收藏本文然后开始你的精通SVG之旅吧。

小刀c

2022/08/16

1.6K0

SVG 动画精髓

TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。例如：路径动画图形渐变：线条动画：以及，相关的动画的矩阵知识，

villainhr

2018/07/03

3.4K0

随便做的svg动画

2. 以上情况下atrributeName = "height"会被微信公众号的富文本编辑器过滤掉（出现在百叶窗那个例子中）

用户3258338

2021/01/04

1.1K0

【Web动画】SVG 线条动画入门

通常我们说的 Web 动画，包含了三大类。 CSS3 动画 javascript 动画（canvas） html 动画（SVG）个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论

Sb_Coco

2018/05/28

2.3K0

WEB动画的几种实现方式

svg css canvas 云点播 flash

WEB 的动画实现多种多样，随着 H5 的发展，实现动画的方式越来越多了。初步统计实现动画的方式有以下一些方式实现

chuchur

2022/10/25

2.4K0

SVG 动画精髓（下）

本文作者：ivweb villainthr 接SVG 动画精髓（上）线条动画 SVG 中的线条动画常常用作过渡屏（splash screen）中。例如：或者，一些比较炫酷的 LOGO 中，比如

腾讯IVWEB团队

2017/07/07

1.9K0

SVG 动画精髓（上）

svg 图像处理

本文作者：ivweb villainthr TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。例如：路径动画图形

腾讯IVWEB团队

2017/07/06

3.7K0

【Web动画】SVG 实现复杂线条动画

在上一篇文章中，我们初步实现了一些利用基本图形就能完成的线条动画：【Web动画】SVG 线条动画入门当然，事物都是朝着熵增焓减的方向发展的，复杂线条也肯定比有序线条要多。很多时候，我们无法人工去

Sb_Coco

2018/05/28

1.9K0

php强制转换浮点型到整型出现结果不符合预期

php 编程算法

使用php的浮点数转int型时，出现转换结果不符合预期，直接转换出现问题在其他强类型语言中可能会有意识的去规避，而php能从心所欲，反倒会出现这种细节问题。

槽痞

2020/04/06

1.7K0

php强制转换浮点型到整型出现结果不符合预期

初窥 SVG Path 动画

本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题，是因为在项目中有要求用到它。所谓 SVG Path 动画，就是让图形有像人实时绘制一样的动画效果，就比如下面这种：

IMWeb前端团队

2019/12/04

2.2K0

初窥 SVG Path 动画

图像处理 svg

本文主要介绍了如何使用 SVG Path 实现绘制可循环播放的动画，包括动画的起点、终点和循环路径，以及如何使用 CSS3 的 keyframes 和 animation 实现动画效果。同时，还介绍了一些 SVG Path 的常见属性，包括 stroke-dasharray、stroke-dashoffset 等，以及如何通过修改这些属性来实现动画效果。

IMWeb前端团队

2017/12/29

2.9K0

性能分析案例——虚拟机内存性能不符合预期？

kernel linux 虚拟化

有小伙伴反馈在其实验室环境中，通过sysbench工具测试，虚拟机上的内存性能指标只有其物理机的一半左右：

curu

2020/11/09

2.4K0

性能分析案例——虚拟机内存性能不符合预期？

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame

用户1258909

2018/07/24

3.8K0

带你轻松打开SVG动画的大门

数据库机器学习人工智能

初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo

练小习

2017/11/30

9040

带你轻松打开SVG动画的大门

初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo都所

练小习

2017/12/29

7860

SVG滤镜波浪动画效果

今天给大家分享一个用SVG实现的滤镜波浪动画效果，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <me

越陌度阡

2020/11/26

9800

SVG 路径动画简易指南

svg javascript css

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！ SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

疯狂的技术宅

2019/03/27

3.6K0

php强制转换浮点型到整型出现结果不符合预期

php 编程算法

使用php的浮点数转int型时，出现转换结果不符合预期，直接转换出现问题在其他强类型语言中可能会有意识的去规避，而php能从心所欲，反倒会出现这种细节问题。

槽痞

2020/06/23

2.8K0

相似问题

SVG动画与SMIL

11

CSS动画的行为与预期不符

228

SMIL动画SVG "to“值

11

svg上的Smil动画

12

SVG SMIL动画生长元件

13

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验