SVG 使用 Javascript 将形状平滑地变形为其他预定义形状

Question

我想要形状之间的平滑过渡（下面的示例显示了一个突然的过渡，以便您了解我需要平滑过渡的地方）。
形状的顺序由Javascript决定（例如，我固定了一个任意顺序，但在实际问题中，用户输入决定了选择哪个形状，所以事先不知道）。

example.svg:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="100%" height="100%" viewBox="0 0 400 400">
<script>
window.animate = function( fromId, toId, next )
{
    return function()
    {
        var elem = document.getElementById( 'elem' );
        /* Here a smooth animation is supposed to happen. */
        elem.setAttribute( 'xlink:href', '#' + toId );

        if( next )
        {
            window.setTimeout( next, 1000 );
        }
    };
};

window.onload = function()
{
    /* The animation order is determined by javascript. */
    var step3 = window.animate( 'path-2', 'path-1', null );
    var step2 = window.animate( 'path-1', 'path-2', step3 );
    var step1 = window.animate( 'path-0', 'path-1', step2 );
    var step0 = window.animate( 'path-0', 'path-0', step1 );

    step0();
};
</script>

<style>path{stroke:#000;}</style>

<defs>
<path id="path-0" style="fill:#fcc" d="M0,0 h100 v100 h-100 v-100" />
<path id="path-1" style="fill:#ccf" d="M0,0 h50 l50 50 l-100 50 v-100" />
<path id="path-2" style="fill:#cfc" d="M0,0 h150 l-50 50 l-100 50 v-100" />
</defs>

<use id="elem" xlink:href="#path-0" x="150" y="150" />
</svg>

据说 <animate> 在某种程度上可行，但我无法让它工作。

animate.svg:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="100%" height="100%" viewBox="0 0 400 400">
<script>
window.set_animation = function( animId, fromId, toId )
{
    var anim = document.getElementById( animId );
    var from = document.getElementById( fromId );
    var to = document.getElementById( toId );
    anim.setAttribute( 'from', from.getAttribute( 'd' ) );
    anim.setAttribute( 'to', to.getAttribute( 'd' ) );
};

window.onload = function()
{
    /* The animation order is determined by javascript. */
    window.set_animation( 'anim-0', 'path-0', 'path-1' );
    window.set_animation( 'anim-1', 'path-1', 'path-2' );
    window.set_animation( 'anim-2', 'path-2', 'path-1' );

    /* Can start animation only once animation steps are defined. */
    var anim = document.getElementById( 'anim-0' );
    anim.beginElement();
};
</script>

<style>path{stroke:#000;}</style>

<defs>
    <path id="path-0" style="fill:#fcc" d="M0,0 l100,0 l0,100 l-100,0 l0,-100" />
    <path id="path-1" style="fill:#ccf" d="M0,0 l50,0 l50,50 l-100,50 l0,-100" />
    <path id="path-2" style="fill:#cfc" d="M0,0 l150,0 l-50,50 l-100,50 l0,-100" />
</defs>

<path id="elem" x="150" y="150" d="">
    <animate id="anim-0" begin="indefinite" attributeType="XML" attributeName="d" dur="2s" from="[set by javascript]" to="[set by javascript]" />
    <animate id="anim-1" begin="anim-1.end" attributeType="XML" attributeName="d" dur="2s" from="[set by javascript]" to="[set by javascript]" />
    <animate id="anim-2" begin="anim-2.end" attributeType="XML" attributeName="d" dur="2s" from="[set by javascript]" to="[set by javascript]" />
</path>
</svg>

Answer 1

使用 <animate> 的规则是两条路径必须：

具有相同数量的路径元素
有匹配的路径命令

您的动画将无法运行，因为路径不兼容：

path-0: M h v h v
path-1: M h l l v

Answer 2

像我在这里所做的那样，将所有值放入单个动画中会更容易。如果你不这样做，那么你必须在前一个动画结束时开始每个后续动画，这是可行的，但更复杂。

您需要 fakeSmile or the Chrome SMIL shim 才能 IE/Chrome，但这在 Firefox 上无需插件即可播放。

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="100%" height="100%" viewBox="0 0 400 400">
<script>

function create_animation(animId, paths, attribute)
{
    var anim = document.getElementById( animId );
    var values = paths.map(function(item) { return document.getElementById(item).getAttribute(attribute) }).join(';'); 
        
    anim.setAttribute( 'values', values );
}

window.set_animation = function( animId, paths )
{
    create_animation(animId, paths, 'd');
    create_animation(animId + '-colour', paths, 'fill');
};

window.onload = function()
{
    /* The animation order is determined by javascript. */
    window.set_animation( 'anim-0', ['path-0', 'path-1', 'path-2'] );
};
</script>

<style>path{stroke:#000;}</style>

<defs>
    <path id="path-0" fill="#fcc" d="M0,0 l100,0 l0,100 l-100,0 l0,-100" />
    <path id="path-1" fill="#ccf" d="M0,0 l50,0 l50,50 l-100,50 l0,-100" />
    <path id="path-2" fill="#cfc" d="M0,0 l150,0 l-50,50 l-100,50 l0,-100" />
</defs>
  
<path>
  <animate id='anim-0' dur="3s" attributeName='d' fill="freeze"/>
  <animate id='anim-0-colour' dur="3s" attributeName='fill' fill="freeze"/>
</path>

SVG 使用 Javascript 将形状平滑地变形为其他预定义形状

SVG smoothly morphing shape into other predefined shapes with Javascript

javascript

animation

svg

svg-morphing