我正在尝试用动画 SVG 文本路径包裹一个新闻块(宽度和高度会有所不同)。到目前为止我得到了这个:
#canvas{
height: 100vh;
width: 100vw;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}Run Code Online (Sandbox Code Playgroud)
<div class="svg-container">
<svg id="canvas" version="1.1" viewBox="0 0 500 500">
<path width="100%" id="curve" fill="none" d="M0,0 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" />
<text font-family="Helvetica" font-size="20" fill="black">
<textPath xlink:href="#curve" startOffset="0%" id="text">Last News</textPath>
<animate xlink:href="#text" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="10s" …Run Code Online (Sandbox Code Playgroud)