今日のsvgその2
たのしい。
コードは以下
<svg> <path id="path" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> <text id="text" font-size="8" dx="0" dy="0"> <textPath xlink:href="#path"> testtesttesttest </textPath> </text> </svg>
#path { stroke:#808080; fill:none; stroke-width:1; stroke-dasharray:2000; stroke-dashoffset:2000; -webkit-animation: line 3s ease-in 0s infinite alternate; animation: line 3s ease-in 0s infinite alternate; } #text { stroke:#ffccff; fill:#000; stroke-width:1; stroke-dasharray:5000; stroke-dashoffset:5000; -webkit-animation: txt 10s ease-out 3s infinite alternate; animation: txt 10s ease-out 3s infinite alternate; } @-webkit-keyframes line { 0% { stroke-dashoffset:2000; } 100% { stroke-dashoffset:0; } } @keyframes line { 0% {stroke-dashoffset:2000; } 100% { stroke-dashoffset:0; } } @-webkit-keyframes txt { 0% { stroke-dashoffset:5000; } 100% { stroke-dashoffset:0; } } @keyframes txt { 0% { stroke-dashoffset:5000; } 100% { stroke-dashoffset:0; } }
ついで、ポトフのキービジュアルもSVGにしてみた。
Hisako Harada