标签: svg-animate

介绍

我知道一些SVG使用Javascript和DOM <animate>元素的基本动画技术.所以我创建了这个SVG,但我无法弄清楚如何在没有太多代码的情况下每x秒触发一次动画.我试过begin="4s"但它只是第一次等.

题:

有一个类似begin或的DOM属性dur,但是以秒为单位定义间隔？哪种方法更好？

我尝试过的:

<animateTransform attributeName="transform" additive="sum" attributeType="XML" 
type="rotate" dur="1s" repeatCount="indefinite" from="0 54.2 43.3" 
to="360 54.2 43.3" begin="3s" fill="freeze"/>

这里有完整的例子:SVG Fiddle

笔记:

• 我已经检查过SVG Spec
• 添加一些Javascript代码是一个选项
• 使用CSS3也是一种选择

我创建了一个实时图表,其中不断地输入和绘制新的数据点.

目前我正在使用requestAnimationFame(),其中我每秒渲染元素的更新位置30次.

对于许多SVG元素,这可能会有点慢.

使用SVG动画,CSS动画或CSS过渡实现这样的连续滚动图的最有效方法是什么.(没有第三方图书馆).

提前致谢.

我想模拟连续传入实时(动态)数据并输入图表的情况

因此,我尝试使用d3演示动画折线图,而数据阵列需要每1秒连续更新一次.

最初的作品灵感来自benjchristensen

这是我修改过的html源码:我的源代码

我尝试通过调用函数填充buffer[100]withrandom number for every 1 secondstartGenerator()

    function startGenerator()
    {
        //signalGenerator();    
        setInterval("signalGenerator()", 1000); //
    }

    function signalGenerator()
    {
        var buffer = new Array(100);

        var i;
        for (i = 0; i < buffer.length; i++)
        {
            buffer[i] = Math.random() * 10;
        }

        FeedDataToChart("#graph1", 300, 300, "basis", true, 100, 100, buffer, 0);       
    }

以下是FeedDataToChart()参数名称:

function FeedDataToChart(id, width, height, interpolation, animate, updateDelay, transitionDelay, data, startIndex)

我用a counter来检查重绘数据索引,每次重新绘制新数据时,都会counter增加1.直到counter …

我不确定我需要在这个SVG中修改什么才能使它与Firefox兼容？动画在其他浏览器中运行良好,但在Firefox中它只是一个静态图像,并没有动画.

<svg width='360px' height='360px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-balls">
    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
    <g transform="rotate(0 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur=".75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur=".75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#DB3341;#42a3cf" />
        </circle>
    </g>
    <g transform="rotate(72 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur=".75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur=".75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#42a3cf;#76478a" />
        </circle>
    </g>
    <g transform="rotate(144 50 50)"> …

macOS Mojave After Effects 17.0.2 (CC 2020) Chrome/FF/Safari 和 Lottie/Bodymovin 最新版本

在 Safari 中缩放 svg 动画时（变换：scale(>1)），它将呈现极度像素化/模糊。在 Chrome 和 Firefox 中，它渲染没有问题。这是一个已知问题吗？如果是，是否有已知的解决方法？

您可以在这里找到动画： http: //kb.zeitweisen.com/Index.html

如何使用形状变形制作圆形 SVG？

我正在尝试通过有机运动来制作圆圈。

但正如你所看到的，像素似乎有问题。

关于如何使它更好看的任何想法？它甚至是我用来做这件事的正确方法吗？我不是 svg 或形状变形方面的专家。

class App extends React.Component {
  render() {
    return (
      <div>
       <svg width="200px" height="200px" viewBox="0 0 120 120">
    <defs>
        <filter id="distort">
            <feTurbulence baseFrequency=".02" type="fractalNoise" />
            <feColorMatrix type="hueRotate" values="0">
                <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite" />
            </feColorMatrix>
            <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="B" scale="20">
                <animate attributeName="scale" values={Math.round(Math.random() * 20) + ';' + Math.round(Math.random() * 10) + ';' + Math.round(Math.random() * 10) + ';' + Math.round(Math.random() * 10) + ';'}  dur="5s" repeatCount="indefinite" />
            </feDisplacementMap>
        </filter>
    </defs>
    <circle filter="url(#distort)" …

如何在 CSS3 或 JS 中实现径向擦除动画？这看起来很简单，但我无法弄清楚。

所以我正在学习SVG动画。

基本上我想做的就是当它悬停在圆圈上时改变它的颜色。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 437.1 294.4" style="enable-background:new 0 0 437.1 294.4;" xml:space="preserve">

    <style type="text/css">

        .st0:hover {
            fill: red;
         }

    </style>

    <g id="Circle">
        <path class="st0" d="M291.3,147.4c0,77-62.4,139.4-139.4,139.4S12.5,224.4,12.5,147.4C12.6,70.4,75,8,151.9,8
        C228.9,8,291.3,70.4,291.3,147.4"/>
    </g>

</svg>

当 svg 代码位于 html 文件内时，这完全符合预期。

但是，当我将其放入 svg 文件并使用 img 标签调用它时，悬停效果不再起作用。

<img class="logo" src="url/logo.svg">

有没有办法做到这一点而不将 svg 代码嵌入 html 中？

谢谢！

这是我迄今为止在stackoverfow本身的朋友的帮助下所做的.

它工作正常,但我想做一个对我来说有点复杂的动画.

// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
circle = document.getElementById("circle");
// The start position of the drawing
myline.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction() { …

目前，我无法让此SVG完美地沿其轴旋转。我试过计算我认为应该成为中心的内容。谁能为我指出正确的方向，为什么它不能完美地围绕质心旋转？还是将来如何最好地计算？

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17 17" >
<style type="text/css">
    .st0{fill:#000000;}
</style>
    <path id="arrow" class="st0" d="M9.3,16.4c3.2-0.4,5.8-2.9,6.2-6.1c0.5-4.2-2.8-7.7-6.9-7.8V0.6c0-0.1-0.1-0.2-0.2-0.1l-4,2.9
    c-0.1,0-0.1,0.1,0,0.2l3.9,2.8c0.1,0.1,0.2,0,0.2-0.1V4.5c2.9,0,5.2,2.5,5,5.4c-0.2,2.5-2.2,4.5-4.8,4.7c-2.7,0.2-5-1.7-5.4-4.2
    c-0.1-0.5-0.5-0.8-1-0.8c-0.6,0-1,0.5-1,1.1C2.1,14.2,5.4,16.9,9.3,16.4L9.3,16.4z"/>

    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.425116062164307 8.459185183048248" to="0 8.425116062164307 8.459185183048248" dur="0.5s" additive="sum" repeatCount="indefinite" />
</svg>

https://jsfiddle.net/vfz5t0vw/