我正在使用 SVG 為圓角矩形路徑周圍的文本設定影片。這個想法是讓文本流在矩形周圍不斷移動。
這是 After Effects 教程視頻中的矩形影片示例
但是當關閉文本的 SVG 路徑時，影片根本不會運行，如果我讓路徑保持打開狀態，文本會在到達末尾時消失，如以下代碼片段所示：
html, body {
background: black;
margin: 0 auto;
}
.container {
widht: 100%;
background: red;
}
.svgwave {
margin-left: calc(50% - 150px);
margin-top: 100px;
}<div class="wrapper">
<svg class="svgwave" xmlns="http://www.w3.org/2000/svg" width="301" height="301" viewBox="0 0 301 301" style="width:auto; height: auto; overflow: visible;">
<path id="wavepath" d="M145.5 301.5H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5" style="fill: transparent; stroke: transparent; stroke-width: 1px;"></path>
<foreignObject x='6' y='6' width='300px' height='300px'>
<div
style="width: 282px; height: 282px;
border-radius: 8px;
background-size: contain;
border: 4px solid white;
display:inline-block; "
></div>
</foreignObject>
<text text-anchor="middle" style="text-transform: uppercase; font-family: Arial; font-size: 20px; fill: white;">
<textPath style=" fill-opacity: 1" href="#wavepath" side="left" startOffset="0%">
<animate attributeName="startOffset" from="30%" to="42%" begin="0s" dur="4s" repeatCount="indefinite"></animate>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
</textPath>
</text>
</svg>
</div>- 使用 SVG 實作此影片的最佳方法是什么？
- 是否有任何替代方法可以使用 Javascript 實作這一目標？
uj5u.com熱心網友回復：
如果您擴展路徑并添加 textLength 設定以確保文本完美換行 - 并調整其他一些東西，您可以讓它看起來更好。仍然有微小的接縫抖動，但并不那么明顯。
html, body {
background: black;
margin: 0 auto;
}
.container {
widht: 100%;
background: red;
}
.svgwave {
margin-left: calc(50% - 150px);
margin-top: 100px;
} <svg class="svgwave" xmlns="http://www.w3.org/2000/svg" width="301" height="301" viewBox="0 0 301 301" style="width:auto; height: auto; overflow: visible;">
<path id="wavepath" d="M145.5 301.5H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5 H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5 H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5 H13C6.09645 301.5 0.5 295.904 0.5 289V13C0.5 6.09645 6.09644 0.5 13 0.5H289C295.904 0.5 301.5 6.09644 301.5 13V289C301.5 295.904 295.904 301.5 289 301.5H156.5" style="fill: transparent; stroke: transparent; stroke-width: 1px;" ></path>
<foreignObject x='6' y='6' width='300px' height='300px'>
<div
style="width: 282px; height: 282px;
border-radius: 8px;
background-size: contain;
border: 4px solid white;
display:inline-block; "
></div>
</foreignObject>
<text text-anchor="left" style="text-transform: uppercase; font-family: Arial; font-size: 20px; fill: white;">
<textPath style=" fill-opacity: 1" href="#wavepath" side="left" startOffset="0%" textLength="1175">
<animate attributeName="startOffset" from="20%" to="42%" begin="0s" dur="12s" repeatCount="indefinite"></animate>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
First <tspan style="fill: #DED279;">Second</tspan>
</textPath>
</text>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/472006.html
標籤：javascript 动画片 svg
上一篇：在影片中實作方程的問題