はてなブックマーク

SVGを使ってアニメーションさせながらテキストを表示していく方法を紹介します。ここでは、文字のアウトラインを描いてから色を塗りつぶすといったアニメーションをさせてテキストを表示していく方法でやってみます。 アウトラインの描き方 SVGでアウトラインを描く場合は、strokeプロパティを使います。 text { stroke: #000; stroke-width: 1px; } このように指定をした場合は線幅1pxの黒色でアウトラインが描かれます。 要素の中身の描き方 要素に塗りをつけて中身を描く場合は、fillプロパティを使います。 text { fill: #000; } このようにすると、黒色で要素の中身が塗りつぶされます。塗りつぶさずにアウトラインだけ描きたい場合は「fill: none;」とすることで要素のアウトラインだけが描かれます。 アニメーションのさせ方 アウトラインにアニ