Question

我尝试将animate个属性添加到<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black"> <path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z"> <animate class="triangle-animation" attributeType="XML" attributeName="d" from="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z" to="M765,22L765,15L505.00002429484215,15L490.00002429484215,0L475.00002429484215,15L0.5,15L0.5,21.5" dur="4s" repeatCount="1" fill="freeze" keySplines=" 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" calcMode="spline" begin="indefinite"></animate> </path> </svg> <button id="btn">Click me</button>元素以模拟easing animation。缓和效果不起作用。

jsfiddle

HTML

document.getElementById("btn").onclick = function(e) {
    console.log('anim');
  document.querySelector('.triangle-animation').beginElement();
}

JS

const content = $('#content');
const blurredContentFrame = $('#blurredContentFrame');

$(document.body).append(
    '<div id="blurredContentFrame">' +
    '<div id="blurredContent"></div>' +
    '</div>');

content.clone().appendTo('#blurredContent');

$(window).scroll(function () {
    const fromTop = $(window).scrollTop();
    const heightCalc = (398 + fromTop);
    blurredContentFrame.css('height', heightCalc + 'px');
    console.log(fromTop);
    console.log('heightCalc:' + heightCalc);
    console.log('Height:' + blurredContentFrame.css('height'));
});

Answer 1

如果您使用keyTimes，则必须提供一个values列表，其中包含匹配数量的以分号分隔的条目，或者如果您使用from和to，{ {1}}必须为keyTimes且"0;1"必须只包含一个条目。
值列表中的路径定义必须在结构上匹配，只有数字不同。如果有一个结束keySplines命令，则每个值都需要一个。例外：可以使用或省略可选的命令字母（用于重复相同的命令）。
Bonus：您的示例不需要javascript就可以点击按钮开始。只需设置Z。

begin="btn.click"

Answer 2

我在Z属性中遗失了to。工作jsfiddle。

svg animate中的缓动不起作用

2 个答案: