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中 ,另一份作为背景。 每个滑冰者的“热点”区域将具有两个功能:滑冰者的常规打击区域和将应用于图像的该部分的蒙版。
![alt](https://thenewcode.com/assets/images/skater-paths.png)
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