SVGアニメーションを実装する時の手引き

イラレのSVGデータから線をなぞったようなアニメーションを実装するときに調べたものと手順を記載します。

See the Pen MRWeBK by Susumu Seino (@susumu) on CodePen.0

vivusというSVGアニメーションが簡単に実装できるライブラリを利用しますまずは描写に使うSVGをイラレを使いコードを書き出し、不要なタグを削除します。上記のサンプルのようにCDNでvivus.jsを読み込んだら最下部に動作用のJSを書き描写が終わったらCSSでafter-fillクラスを付与し、ゆっくり最後の塗りを表現します。気が向いたらあとでちゃんと加筆する。

参考URL

SVGとVivus.jsを使ってペンで描画する様なアニメーションを作る方法 | 株式会社チップディップ

SVGをillustratorで書き出して表示する方法 | トーテックビジネスサポート株式会社 ウェブチームブログ

https://ics.media/entry/15970/

正規表現で連続した単語をマッチさせる時の備忘録

WordPressで外部配信用のRSSを作成する時に外部配信先によってさまざまな仕様があるため、出力される本文のHTMLなどを添削もしくは変換・入れ替えしなければいけません。

同じ単語が複数回以上繰り替えす時にマッチする正規表現と調べた文献をまとめます。

$content = preg_replace( "/(らーめん){2,}/", "ラーメン", $content );

上記のようにpreg_replaceを用いてテキストの変更をおこないます。上記のパターンだと「らーめん」という単語が2回以上続いている箇所については「ラーメン」という文字に置換されます。

また今回は が複数行にわたって挿入されていた場合に1回に置き換えたいので下記のようにマッチパターンを記述して対応しました。

$content = preg_replace( "/( \r\n){2,}/", " \r\n", $content );

[PHP]改行なしスペース( 、0xA0)を、普通の空白(0x20)に置換する

開発メモ:正規表現を使い、連続した改行コード・改行文字を取り除く|理総研Web@中学受験専門理科総合研究所