SVG Web实现文字特效,展示地铁信息,航班信息
我考虑用jsp和CSS常规方式实现,后来考虑到不熟悉WEB编程,再着想了解SVG图片,所以弄了个这个
tspan 支持添加多个文本
repeatCount="indefinite" 循环
animate attributeType="CSS" CSS类型动画
<svg width="800" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="800" height="120"
style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)"/>
<text id="TextElement" x="0" y="48" style="font-family:Verdana;font-size:48;fill:rgb(255,0,0)">
<tspan x="0" y="40" fill="#ffffff">LEBAK BULUS
</tspan>
<tspan x="600" y="40" fill="#ffffff">16:00 6
</tspan>
<tspan x="120" y="100" fill="yellow">Kereta MUB jatan langsug
<animate attributeType="CSS" attributeName="fill"
from="#000000" to="red" begin="0.2s" dur="0.5s"
repeatCount="indefinite">
</animate>
</tspan>
</text>
</svg>
<svg width="800" height="148" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="1024" height="500"
style="fill:rgb(0,0,0);stroke-width:1;
stroke:rgb(0,0,0)"/>
<text id="TextElement" x="0" y="30"
style="font-family:Verdana;font-size:32">
<tspan x="120" y="30" fill="green">First line
<animate attributeType="CSS" attributeName="fill"
from="#000000" to="#F40" dur="0.5s"
repeatCount="indefinite">
</animate>
</tspan>
<tspan x="120" y="64" fill="yellow">It's BLK
<animate attributeType="CSS" attributeName="fill"
from="#000000" to="yellow" begin="0.2s" dur="0.5s"
repeatCount="indefinite">
</animate>
</tspan>
</text>
<circle cx="40" cy="50" r="30" style="fill:none;stroke-width:3;stroke:black">
<animate attributeType="CSS" attributeName="fill"
from="#000000" to="#F40" dur="0.5s"
repeatCount="indefinite">
</animate>
</circle>
</svg>
最后在浏览器实现的功能如下,用网页展示地铁列车信息