小编Juá*_*rez的帖子

响应式 SVG 文本路径包装动态内容

我正在尝试用动画 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)

css svg

2
推荐指数
1
解决办法
844
查看次数

标签 统计

css ×1

svg ×1