需要SVG动画指导

编程问答 2022-05-10

问题描述

我今天阅读了 SVG 袖珍指南并从中学到了很多东西，但是……它不包括动画。我需要一些关于如何制作简单动画的指导。我不需要帧之间的任何过渡，我只想定义第一帧的形状，第二帧的形状等。

https://svgpocketguide.com/book/

def model(X,Y,random_generator,repetition):
...
etc.

from multiprocessing import Pool
# or use the following import instead to use multithreading (but then use standard random generator):
# from multiprocessing.dummy import Pool
import random
from functools import partial
from multiprocessing.managers import BaseManager

class RandomGeneratorManager(BaseManager):
    pass

class RandomGenerator:
    def __init__(self):
        random.seed(0)

    def randint(self,a,b):
        return random.randint(a,b)

    def random(self):
        return random.random()

    # add other functions if needed


if __name__ == '__main__':
    RandomGeneratorManager.register('RandomGenerator',RandomGenerator)
    with RandomGeneratorManager() as manager:
        random_generator = manager.RandomGenerator()
        # why 40? why not use default,which is the number of cpu cores you have?:
        pool = Pool(40): 
        worker = partial(model,x_train,y_labels,random_generator)
        results = pool.map(worker,range(100))

解决方法

<!-- https://svgpocketguide.com/book/#section-4 -->
<!-- https://oak.is/thinking/animated-svgs/ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
    <rect width="1080" height="1080" fill="white"/>

    <line x1="400" y1="400" x2="10" y2="515" stroke="hsl(250,82%,56%)" stroke-width="3">
        <animate
            attributeName="x1"
            dur="0.5s"
            values="50;100;200;350;400"
            calcMode="discrete"
            repeatCount="1"
        />
        <animate
            attributeName="y1"
            dur="0.5s"
            values="50;100;200;350;400"
            calcMode="discrete"
            repeatCount="1"
        />
        <animate
            attributeName="stroke"
            dur="0.5s"
            values="hsl(50,56%);hsl(100,56%);hsl(150,56%);hsl(200,56%);hsl(250,56%)"
            calcMode="discrete"
            repeatCount="1"
        />
    </line>

    <circle cx="50" cy="50" r="5" fill="black" />
    <circle cx="100" cy="100" r="5" fill="black" />
    <circle cx="200" cy="200" r="5" fill="black" />
    <circle cx="350" cy="350" r="5" fill="black" />
    <circle cx="400" cy="400" r="5" fill="black" />

</svg>
,

这个问题展示了一种在 SVG 中实现基于帧的动画的方法。它使用 CSS 动画，但您可以使用 SMIL 实现相同的效果。但是，CSS 方式在 IMO 中更简洁一些。

SIMPLE – Animate Multiple SVGs in Sequence (like a looping GIF)

这是另一个可能有帮助的答案：SVG frame-based animation

animationanimationsvgsvg-animate