d3 svg悬停效果_SVG的形状悬停效果

d3 svg悬停效果

View demo 查看演示 Download Source 下载源

If you have visited the fantastic new edition of The Christmas Experiments then you might have noticed the really cool hover effect in the Christmas calendar that uses a triangular shape. The shape is made up of a triangle using borders and today I would like to show you how to achieve the same effect using SVG and Snap.svg. The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover. There are many creative possibilities and today we’ll create three different examples. The nice thing of utilizing SVG is that we can adjust the shape size to their parent container’s size and make everything fluid.

如果您访问了神奇的新版《圣诞节实验》，那么您可能已经注意到圣诞节日历中使用三角形的悬停效果了。 该形状由带边框的三角形组成，今天我想向您展示如何使用SVG和Snap.svg达到相同的效果。 这个想法是用一条路径代表一个字幕的形状背景创建一个SVG，然后在悬停时将该路径变形为另一条路径。 有许多创造性的可能性，今天我们将创建三个不同的示例。 利用SVG的好处是，我们可以将形状大小调整为其父容器的大小，并使所有内容流畅。

The illustrations used in the demos are by talented Isaac Montemayor. See his original artwork on his website or Dribbble.

演示中使用的插图由才华横溢的艾萨克·蒙特马约尔( Isaac Montemayor)制作。 在他的网站或Dribbble上查看他的原始作品。

So, let’s get started!

所以，让我们开始吧！

标记 (The Markup)

What we’ll do first, is to draw two shapes in a vector graphics editor like Adobe Illustrator or Inkscape. Each shape will consist of one path and when we are done, we’ll copy the points of our paths to be used in our markup. Note that we’ve transformed a polygon into a path. If you are using Inkscape you can do that by selecting the object and choosing Path > Object to Path. The points for the path can be obtained from Edit > XML Editor… which will open a view as seen in the following screenshot:

我们首先要做的是在矢量图形编辑器(如Adobe Illustrator或Inkscape)中绘制两个形状。 每种形状都将包含一个路径，完成后，我们将复制路径的点以用于标记。 请注意，我们已经将多边形转换为路径。 如果使用的是Inkscape，则可以通过选择对象并选择“路径”>“对象到路径”来实现。 路径的点可以从“编辑”>“ XML编辑器...”中获取