SVGをSymbolで再利用したときに、linearGradientが効かないとき

SVGのSymbolを利用するとページ内で再利用する事ができるので便利なのですが、Symbol化した要素にlinearGradientを掛けたときに上手く適用されない事がありました。

調べてみた所、Symbol化しているsvgタグはdisplay:none;にしてはダメというコトだったみたいです。

NGな例

<svg style="display: none;">
    <defs>
        <linearGradient id="gradient">
            <!-- グラデーションの指定 -->
        </linearGradient>
        <symbol id="symbol" viewBox="0 0 100 100">
            <g fill="url(#gradient)">
                <!-- 描画要素の指定 -->
            </g>
        </symbol>
    </defs>
</svg>

参考ページのように、visibility:hidden; width: 0; height: 0;の様なスタイルを掛けると正常に表示されました。

OKな例

<svg style="visibility:hidden; width: 0; height: 0;">
    <defs>
        <linearGradient id="gradient">
            <!-- グラデーションの指定 -->
        </linearGradient>
        <symbol id="symbol" viewBox="0 0 100 100">
            <g fill="url(#gradient)">
                <!-- 描画要素の指定 -->
            </g>
        </symbol>
    </defs>
</svg>

表示させたくないからと言って何でもかんでもdisplay: none;掛けちゃダメですね。