animation - SVG：＆keySplines不适用于FF
问题描述
在此示例中：https ://data.wort.lu/tests/css/curved.html篮子跟随轮子......除了在 Firefox 上。
似乎 FF 确实有 keySplines 作为 animateMotion 的属性的问题。
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<title>Let's go Schueberfouer</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,400,600" rel="stylesheet">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 2em;
}
.nacelle {
cursor: pointer;
}
.nointeraction {
pointer-events: none;
}
#container {
width: 100%;
max-width: 600px;
display: flex;
justify-content: center;
}
#info {
font: 200 2em "Fira Sans";
text-align: center;
}
#info button, #module button {
border: none;
background-color: #004499;
color: white;
padding: 0.6em 1em;
cursor: pointer;
display: block;
margin: auto;
}
#module {
position: fixed;
top: -180vh;
width: 100%;
height: 100vh;
background-color: orange;
transition: top 2s 1s cubic-bezier(0.8, 0, 0.1, 1);
left: 0;
box-shadow: 0px 70px 100px 0px rgba(0,0,0,0.3);
padding: 2em;
overflow: auto;
box-sizing: border-box;
}
#module.down {
top: 0;
}
#module h1 {
font: 200 2em "Fira Sans";
color: white;
}
</style>
</head>
<body>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin slice">
<path d="M30,250a250,250 0 1,0 500,0a250,250 0 1,0 -500,0" id="wire1" fill="transparent" />
<path d="M63.49,375C132.53,494.57,285.43,535.54,405,466.51S565.54,244.57,496.51,125 S274.57-35.54,155,33.49S-5.54,255.43,63.49,375" id="wire2" fill="transparent" />
<path d="M155,466.51c119.57,69.04,272.47,28.07,341.51-91.51S524.57,102.53,405,33.49S132.53,5.43,63.49,125 S35.43,397.47,155,466.51" id="wire3" fill="transparent" />
<path d="M280,500c138.07,0,250-111.93,250-250C530,111.93,418.07,0,280,0S30,111.93,30,250 C30,388.07,141.93,500,280,500" id="wire4" fill="transparent" />
<path d="M405,466.51C524.57,397.47,565.54,244.57,496.51,125S274.57-35.54,155,33.49S-5.54,255.43,63.49,375 S285.43,535.54,405,466.51" id="wire5" fill="transparent" />
<path d="M496.51,375C565.54,255.43,524.57,102.53,405,33.49S132.53,5.43,63.49,125S35.43,397.47,155,466.51 S427.47,494.57,496.51,375" id="wire6" fill="transparent" />
<path d="M530,250C530,111.93,418.07,0,280,0S30,111.93,30,250c0,138.07,111.93,250,250,250 S530,388.07,530,250" id="wire7" fill="transparent" />
<path d="M496.51,125C427.47,5.43,274.57-35.54,155,33.49S-5.54,255.43,63.49,375S285.43,535.54,405,466.51 S565.54,244.57,496.51,125" id="wire8" fill="transparent" />
<path d="M405,33.49C285.43-35.54,132.53,5.43,63.49,125S35.43,397.47,155,466.51S427.47,494.57,496.51,375 S524.57,102.53,405,33.49" id="wire9" fill="transparent" />
<path d="M280,0C141.93,0,30,111.93,30,250s111.93,250,250,250s250-111.93,250-250S418.07,0,280,0" id="wire10" fill="transparent" />
<path d="M155,33.49C35.43,102.53-5.54,255.43,63.49,375S285.43,535.54,405,466.51S565.54,244.57,496.51,125 S274.57-35.54,155,33.49" id="wire11" fill="transparent" />
<path d="M63.49,125C-5.54,244.57,35.43,397.47,155,466.51S427.47,494.57,496.51,375S524.57,102.53,405,33.49 S132.53,5.43,63.49,125" id="wire12" fill="transparent" />
<image xlink:href="https://data.wort.lu/tests/css/roue.png" x="50" y="10" height="500" width="500">
<animateTransform attributeName = "transform"
attributeType = "XML"
type = "rotate"
from = "360 300 260"
to = "0 300 260"
calcMode = "spline"
keySplines = "0 0.55 0.45 1"
keyTimes = "0;1"
restart = "always"
dur = "10s"
repeatCount = "1"/>
</image>
<image class="nacelle" id="n1" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire1"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n2" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire2"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n3" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire3"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n4" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire4"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n5" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire5"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n6" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire6"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n7" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire7"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n8" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire8"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n9" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire9"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n10" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire10"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n11" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire11"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n12" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire12"></mpath>
</animateMotion>
</image>
<image class="nointeraction" xlink:href="https://data.wort.lu/tests/css/nmat.png" x="150" y="240" width="300" />
</svg>
</div>
<div id="info">
<p>Choisissez votre nacelle</p>
</div>
<div id="module">
<h1 id="module_title">Bienvenue dans la nacelle</h1>
<button onClick="hidemodule()">Refermer</button>
</div>
<script>
var nacelle = Array.from(document.querySelectorAll('svg .nacelle'));
nacelle.forEach(function(el) {
el.addEventListener("click", function () {
document.getElementById('info').innerHTML = "<p>Vous avez sélectionné la nacelle " + el.id.substr(1) + "</p><button onClick='anewride(" + el.id.substr(1) + ")'>C'est parti !</button>";
});
});
function anewride (num) {
document.querySelectorAll("svg animateMotion").forEach(element => {
element.beginElement();
});
document.querySelectorAll("svg animateTransform").forEach(element => {
element.beginElement();
});
document.getElementById("module_title").innerHTML = "Bienvenue dans la nacelle " + num;
document.getElementById("module").classList.add("down");
}
function hidemodule () {
document.getElementById("info").innerHTML = "Choisissez votre nacelle";
document.getElementById("module").classList.remove("down");
}
</script>
</body>
</html>如果我用 keyPoints ( https://data.wort.lu/tests/css/v1.html )替换这个属性，它就可以工作。但是......出于同步的原因，我想依靠 keySplines。
你有提示吗？提前感谢您的任何提示。
解决方案
除了设置时间和样条线之外，您还需要将keyPoints属性设置为。/值（或其默认值）不能应用。据我所知，Chrome 的行为在规范中没有依据。"0;1"fromto
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<title>Let's go Schueberfouer</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,400,600" rel="stylesheet">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 2em;
}
.nacelle {
cursor: pointer;
}
.nointeraction {
pointer-events: none;
}
#container {
width: 100%;
max-width: 600px;
display: flex;
justify-content: center;
}
#info {
font: 200 2em "Fira Sans";
text-align: center;
}
#info button, #module button {
border: none;
background-color: #004499;
color: white;
padding: 0.6em 1em;
cursor: pointer;
display: block;
margin: auto;
}
#module {
position: fixed;
top: -180vh;
width: 100%;
height: 100vh;
background-color: orange;
transition: top 2s 1s cubic-bezier(0.8, 0, 0.1, 1);
left: 0;
box-shadow: 0px 70px 100px 0px rgba(0,0,0,0.3);
padding: 2em;
overflow: auto;
box-sizing: border-box;
}
#module.down {
top: 0;
}
#module h1 {
font: 200 2em "Fira Sans";
color: white;
}
</style>
</head>
<body>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin slice">
<path d="M30,250a250,250 0 1,0 500,0a250,250 0 1,0 -500,0" id="wire1" fill="transparent" />
<path d="M63.49,375C132.53,494.57,285.43,535.54,405,466.51S565.54,244.57,496.51,125 S274.57-35.54,155,33.49S-5.54,255.43,63.49,375" id="wire2" fill="transparent" />
<path d="M155,466.51c119.57,69.04,272.47,28.07,341.51-91.51S524.57,102.53,405,33.49S132.53,5.43,63.49,125 S35.43,397.47,155,466.51" id="wire3" fill="transparent" />
<path d="M280,500c138.07,0,250-111.93,250-250C530,111.93,418.07,0,280,0S30,111.93,30,250 C30,388.07,141.93,500,280,500" id="wire4" fill="transparent" />
<path d="M405,466.51C524.57,397.47,565.54,244.57,496.51,125S274.57-35.54,155,33.49S-5.54,255.43,63.49,375 S285.43,535.54,405,466.51" id="wire5" fill="transparent" />
<path d="M496.51,375C565.54,255.43,524.57,102.53,405,33.49S132.53,5.43,63.49,125S35.43,397.47,155,466.51 S427.47,494.57,496.51,375" id="wire6" fill="transparent" />
<path d="M530,250C530,111.93,418.07,0,280,0S30,111.93,30,250c0,138.07,111.93,250,250,250 S530,388.07,530,250" id="wire7" fill="transparent" />
<path d="M496.51,125C427.47,5.43,274.57-35.54,155,33.49S-5.54,255.43,63.49,375S285.43,535.54,405,466.51 S565.54,244.57,496.51,125" id="wire8" fill="transparent" />
<path d="M405,33.49C285.43-35.54,132.53,5.43,63.49,125S35.43,397.47,155,466.51S427.47,494.57,496.51,375 S524.57,102.53,405,33.49" id="wire9" fill="transparent" />
<path d="M280,0C141.93,0,30,111.93,30,250s111.93,250,250,250s250-111.93,250-250S418.07,0,280,0" id="wire10" fill="transparent" />
<path d="M155,33.49C35.43,102.53-5.54,255.43,63.49,375S285.43,535.54,405,466.51S565.54,244.57,496.51,125 S274.57-35.54,155,33.49" id="wire11" fill="transparent" />
<path d="M63.49,125C-5.54,244.57,35.43,397.47,155,466.51S427.47,494.57,496.51,375S524.57,102.53,405,33.49 S132.53,5.43,63.49,125" id="wire12" fill="transparent" />
<image xlink:href="https://data.wort.lu/tests/css/roue.png" x="50" y="10" height="500" width="500">
<animateTransform attributeName = "transform"
attributeType = "XML"
type = "rotate"
from = "360 300 260"
to = "0 300 260"
calcMode = "spline"
keySplines = "0 0.55 0.45 1"
keyTimes = "0;1"
restart = "always"
dur = "10s"
repeatCount = "1"/>
</image>
<image class="nacelle" id="n1" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire1"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n2" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire2"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n3" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire3"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n4" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire4"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n5" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire5"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n6" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire6"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n7" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire7"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n8" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire8"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n9" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire9"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n10" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire10"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n11" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire11"></mpath>
</animateMotion>
</image>
<image class="nacelle" id="n12" xlink:href="https://data.wort.lu/tests/css/nacelle.png" x="0" y="0" height="50" width="50">
<animateMotion restart="always" dur="10s" fill="freeze" keyPoints="0;1" keySplines="0 0.55 0.45 1" keyTimes="0;1" calcMode="spline">
<mpath xlink:href="#wire12"></mpath>
</animateMotion>
</image>
<image class="nointeraction" xlink:href="https://data.wort.lu/tests/css/nmat.png" x="150" y="240" width="300" />
</svg>
</div>
<div id="info">
<p>Choisissez votre nacelle</p>
</div>
<div id="module">
<h1 id="module_title">Bienvenue dans la nacelle</h1>
<button onClick="hidemodule()">Refermer</button>
</div>
<script>
var nacelle = Array.from(document.querySelectorAll('svg .nacelle'));
nacelle.forEach(function(el) {
el.addEventListener("click", function () {
document.getElementById('info').innerHTML = "<p>Vous avez sélectionné la nacelle " + el.id.substr(1) + "</p><button onClick='anewride(" + el.id.substr(1) + ")'>C'est parti !</button>";
});
});
function anewride (num) {
document.querySelectorAll("svg animateMotion").forEach(element => {
element.beginElement();
});
document.querySelectorAll("svg animateTransform").forEach(element => {
element.beginElement();
});
document.getElementById("module_title").innerHTML = "Bienvenue dans la nacelle " + num;
document.getElementById("module").classList.add("down");
}
function hidemodule () {
document.getElementById("info").innerHTML = "Choisissez votre nacelle";
document.getElementById("module").classList.remove("down");
}
</script>
</body>
</html>推荐阅读
- python - 如何总结Python中列表列表中的列？
- docker - 代码隔离：Windows AppContainer 与 Docker
- python - 扩展 django 用户模型（无法添加额外字段）
- date - 如果单元格为空，如何添加今天的日期，如果没有跳到下一列？
- python - 匹配中文单词的正则表达式，不包括匹配单词开头和结尾的其他单词
- nim-lang - 最终从 STDIN 读取压缩文件：正确的方法是什么？
- angular - 有没有办法在我公司用 Angular 制作的内部应用程序上针对本地 Active Directory 对用户进行身份验证
- javascript - 使用 jQuery 禁用特定的下拉菜单？
- elasticsearch - Elastic metricbeat 总系统文件描述符
- angular - 为什么在 Chrome devtool 中模拟离线会导致无法访问 localhost？