html与svg中js交互_SVG中的交互式彩色照片高光效果

html与svg中js交互

Quite some time ago a reader asked for my help in creating a special UI effect for a German skateboard club: mouseover (or touch) any skater in the photo above to see the effect.

相当一段时间以前，一位读者在我的帮助下为德国滑板俱乐部创建了特殊的UI效果：将鼠标悬停在(或触摸)上图中的任何溜冰者以查看效果。

The creative process was unique enough to deserve a two-part series: this article analyses the workflow and code for the effect, while a follow-up will detail the information popups for each skater.

创作过程非常独特，值得分两部分进行：本文分析了效果的工作流程和代码，而后续活动将详细介绍每个溜冰者的信息弹出窗口。

命中地区 (Making The Hit Areas)

The core of the effect required two copies of the image: one in SVG, and the other as a background. The “hotspot” areas for each skater would serve two functions: a general hit area for the skater, and a mask that would be applied to that portion of the image.

效果的核心需要图像的两份副本：一份在SVG中 ，另一份作为背景。 每个滑冰者的“热点”区域将具有两个功能：滑冰者的常规打击区域和将应用于图像的该部分的蒙版。

Skater paths in PhotoShop, before export

导出前在PhotoShop中的溜冰者路径

Creating the paths by hand in Adobe Illustrator wouldn’t work well: the image was a little too complex for Trace to work. Instead, I used PhotoShop’s Magnetic Lasso tool. The selection made for each skater was saved as a path, and