我想為 svg 路徑設定影片，以便影片只運行一次，但是如果 d 值發生變化，則影片應該再次運行一次。我在每次路徑值更改時都無法運行影片，如果我將 repeatCount 值設定為 1，則在 svg 值更改和 svg“重新渲染”后將不會再次運行。我在下面包含了一些代碼來復制我正在嘗試做的事情，任何幫助表示贊賞。這是一個只有影片的代碼演示，沒有反應：https : //codepen.io/shak8/pen/RwLLjNm
const SVGAnimate = () =>{
const [width, setWidth] = useState(213)
const [prevWidth, setPrevWidth] = useState(213)
return (
<div>
<svg width="400" height="500">
<path style="stroke-width:3;stroke:rgb(0,0,0)"
fill="black"
d=`M 0 212 S 226 212, ${width} 20 V 212 H 0`>
<animate
attributeName="d"
dur="5s"
from=`M 0 212 S 226 212,${prevWidth} 20 V 212 H 0`
to=`M 0 212 S 226 212, ${width} 20 V 212 H 0`
repeatCount="1"
fill="black"
/>
</path>
<button onClick={() => {
// These should trigger svg path to change, desired
// effect is for path to change with animation.
setPrevWidth(width == width)
setWidth(width == 213 ? 320 : 213)
}
}> Change</button>
</div>
)
}
我也試過在路徑上使用過渡，它在 chrome 上完美運行，但在 safari 上不起作用。
uj5u.com熱心網友回復：
您可以使用 onClick="animation.beginElement()"
作為觀察：您有一個用于影片的 fill="black" 屬性。我想你的意思是填充=“凍結”。這將凍結類似于 animation-fill-mode: forwards 的影片。
<div>
<svg width="400" height="200">
<path style="stroke-width:3;stroke:rgb(0,0,0)"
fill="black"
d="M 0 212 S 226 212, 100 20 V 212 H 0">
<animate id="animation"
attributeName="d"
dur="5s"
from="M 0 212 S 226 212,100 20 V 212 H 0"
to="M 0 212 S 226 212, 300 20 V 212 H 0"
repeatCount="1"
fill="freeze"
/>
</path>
</svg>
<button onClick="animation.beginElement()"> Change</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/391835.html
標籤：javascript css 反应 svg svg-动画
上一篇：文本標簽未在鏈接標簽內呈現