我的目標是制作一個擺動的星擺。
它在 Chrome 和 Opera 瀏覽器中按預期作業，但在 Firefox 中卡頓。
我已嘗試添加-moz前綴以實作兼容性，但問題仍然存在。
任何見解都值得贊賞。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#path1086 {
position: relative;
animation-name: star;
animation-duration: 2s;
animation-iteration-count: infinite;
transform-origin: center center;
-moz-transform-origin: center;
transform-box: fill-box;
}
#target {
transform-origin: center top;
-moz-transform-origin: center top;
-moz-transform-box: fill-box;
transform-box: fill-box;
position: absolute;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example {
0%, 100% {transform: rotate(45deg);}
50% {transform: rotate(-45deg);}
}
@keyframes star {
0%, 100% {transform: rotate(45deg);}
50% {transform: rotate(-45deg);}
}
</style>
</style>
<body>
<svg
width="100%"
height="100vh"
viewBox="0 0 1366.0 768.0"
version="1.1"
id="SVGRoot"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs824" />
<g
id="layer1">
<rect
style="opacity:1;fill:#0000ff;fill-opacity:0.517647;stroke:#000000;stroke-width:4.73953"
id="rect2147"
width="100%"
height="766.33557"
x="-4.3173833"
y="2.1586916" />
<path
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:0.517647;fill-rule:evenodd;stroke:#000000;stroke-width:4.73953;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
id="path1040"
d="m 1228.2955,753.38337 -42.523,-82.92194 -92.416,-11.98026 65.7231,-66.06609 -17.1642,-91.59499 83.1421,42.09085 81.808,-44.62855 -14.3385,92.07966 67.7244,64.01303 -92.0038,14.81751 z" />
<g
id="target"
transform="translate(-47.491217,94.982435)"
>
<rect
style="fill:#0000ff;fill-opacity:0.517647;stroke:#000000;stroke-width:4.73953"
id="rect936"
width="10.793459"
height="317.32767"
x="319.48636"
y="64.76075"
/>
<path
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#00ff00;fill-opacity:0.517647;fill-rule:evenodd;stroke:#000000;stroke-width:4.73953;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
id="path1086"
d="m 272.8891,413.16778 20.88967,-33.55431 -15.79857,-36.23086 38.3673,9.4984 29.57557,-26.22129 2.82264,39.42465 34.07728,20.02521 -36.62283,14.86737 -8.51465,38.59755 -25.45678,-30.2361 z" />
</g>
</g>
</svg>
</body>
</html>https://jsfiddle.net/zqh8jk5e/
uj5u.com熱心網友回復：
Firefox 似乎在嵌套填充框背景關系方面存在問題。
作為一種解決方法，嘗試將您的 pedulum 父元素與 x="50%" 和 y="0" 對齊。
這樣，您的父元素將不需要特定的樞軸點（否則必須通過 調整transform-box: fill-box;）
function startPendulum() {
let animEls = document.querySelector('[class*="animate-pendulum"]');
animEls.classList.replace('--animate-pendulum', 'animate-pendulum');
}
function startPendulumStar() {
let animEls = document.querySelector('[class*="animate-star"]');
animEls.classList.replace('--animate-star', 'animate-star');
}
function addTransform() {
let animEls = document.querySelector('[class*="pendulum-transform"]');
animEls.classList.replace('--pendulum-transform', 'pendulum-transform');
}.pendulum-wrp {
background-color: rgba(0, 0, 255, 0.517);
display: inline-block;
width: 50%;
}
.transformBox-fill-box {
transform-box: fill-box;
}
.pendulum-star {
fill: #00ff00;
transform-origin: center center;
fill: #00ff00;
fill-opacity: 0.517647;
stroke: #000000;
stroke-width: 4;
stroke-linecap: butt;
stroke-linejoin: miter;
}
.pendulum-rod {
fill: rgba(0, 0, 255, 0.5);
stroke: #000000;
stroke-width: 4
}
.pendulum-group {
transform-origin: center top;
}
.pendulum-transform {
transform: translate(-20%, 5%);
}
.animate-star .pendulum-star {
animation-name: pendulum-anim;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.animate-pendulum .pendulum-group {
animation-name: pendulum-anim;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes pendulum-anim {
0%,
100% {
transform: rotate(45deg);
}
50% {
transform: rotate(-45deg);
}
}<div class="pendulum-wrp --animate-pendulum --animate-star">
<svg viewBox="0 0 1366 768" id="SVGRoot" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g id="pendulum-transform" class="--pendulum-transform">
<g id="pendulum-group" class="pendulum-group --transformBox-fill-box">
<rect id="pendulum-rod" class="pendulum-rod" x="673" y="0" width="10" height="354" />
<g id="pendulum-star" class="pendulum-star transformBox-fill-box">
<path class="pendulum-star-shape" d="M677.667 383.157l-34.609 18.195l6.609-38.539l-28-27.293l38.694-5.623l17.306-35.064l17.306 35.064l38.693 5.623l-28 27.293l6.609 38.539l-34.608-18.195z" />
</g>
</g>
</g>
</svg>
</div>
<p>
<button onclick="startPendulum()">Start pendulum animation</button>
<button onclick="startPendulumStar()">Start star animation</button>
<button onclick="addTransform()">shift by transform</button>
</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/414830.html
標籤：