外部リンクでSVGのCSS3トランジションが機能しない原因と解決策

外部リンクでSVGの塗りつぶしトランジションが動作しない問題

HTML5のSVG要素にCSS3のトランジションを適用した際、:visited擬似クラスを使ったアプローチでは期待通りに動作しないことがあります。これはブラウザのプライバシー保護の仕組みにより、訪問済みリンクへのスタイル適用が大幅に制限されているためです。

残念ながら、この問題はvisited状態だけでは解決できません。しかし、実用的な回避策が存在します。

解決策1：URLにランダムなクエリを追加する

最もシンプルな方法は、リンク先のURLにランダムなクエリパラメータを付与することです。これにより、ブラウザはそのページを「未訪問」と認識するため、トランジションやスタイルが正しく適用されるようになります。

<a href="https://demo.com/?foo=<?php echo rand(0, 99998); ?>">Your link</a>

PHPのrand()関数を使って毎回異なる数値を生成することで、同一ページでも常に「未訪問」の状態として扱われます。

解決策2：JavaScriptでクエリパラメータを除去する

上記の方法だと、実際に遷移する際に不要なクエリパラメータがURLに残ってしまいます。そこで、クリック時のイベントでJSを使ってクエリ部分を取り除き、クリーンなURLへ遷移させることができます。

$('body').on('click', 'a', function(p) {
    p.preventDefault();
    var url1 = $(this).prop('href');
    window.location.href = url1.split("?")[0];
});

コードの仕組み

• p.preventDefault(): デフォルトのリンク遷移を一旦キャンセルします
• $(this).prop('href'): クリックされたリンクの完全なURLを取得します
• url1.split("?")[0]: 「?」以降のクエリ文字列を除去したベースURLを抽出します
• window.location.href: クリーンなURLへページを遷移させます

まとめ

:visitedによるスタイリング制限はセキュリティ上の理由から回避できないため、「ランダムクエリで未訪問扱いにする」「クリック時にJSでクエリを除去する」この2段階の対策を組み合わせるのが効果的です。これにより、SVGの塗りつぶしトランジションを含むCSSアニメーションを、訪問済みリンクでも意図通りに表示できるようになります。