SVG
Googlefonts
ScrollReveal

ScrollRevealでgoogleフォントを読み込んだSVG画像を使う


ScrollRevealとは

スクロールした時に要素がふわっと表示されるアニメーションを簡単に実装できるライブラリです。

軽量かつ、jQueryなどのライブラリに依存せず、cssも必要ないため、スクロールアニメーションをパパッと実装できます。

ScrollReveal


なんでハマったか

今回はSVGのフォントにgooglefontsを使いたかったのです。

また、SVG画像はアウトライン化せずに、使用したいところでした。


失敗例


  1. imgタグで呼び出す → googlefontsが読み込めませんでした。

  2. svgタグで呼び出す → svgタグの中のいろーーーんなタグ全てにScrollRevealが適用される。結果表示されず。(ヘッダーフッター以外全てにScrollRevealを適用したかったので細かい範囲指定が面倒だった)


結論

objectタグで呼び出す → 別documentとして扱われるらしく、ScrollRevealがのみに適用され、googlefontsも問題なく読み込んだ。


html

<object type="image/svg+xml" data="hoge.svg" class="scrollreveal"></object>



hoge.svg

<svg>

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=hoge:300');
.hoge{font-family: 'hoge', sans-serif;
font-weight: 300;}
</style>
・・・
以下省略