Searchlight Effect Using SVG - 気づいて築く

これはSVG Advent Calendar 2017の16日目の記事です。 サーチライト（スポットライト）を当てたような演出をSVGで実現する方法をご紹介します。 具体的にはこんな演出のことです。 DOMとCSSで実現するとしたら Intro.jsというJavaScriptのライブラリをご存知でしょうか。これはWebサイトのチュートリアルガイドを作成するためのものですが、スポットライトっぽい演出が使われています。 このような演出をDOMとCSSで実現しようとした場合、全体を暗くすることは簡単ですが、ライトが当たっているところ（明るいところ）をどうやって「くり抜く」かが問題になります。ブラウザのDevelopr Toolsなどで確認すると、Intro.jsでは対象エレメントのz-indexを極端に大きな値（9999999）にすることで無理やり最前面に引っ張り出しているのが分かります。 なお

[dhrname]

画像にスポットライトを当てた演出ができる