svg图片在html中变形_使用SVG为HTML5视频制作变形播放暂停按钮

svg图片在html中变形

If you pay close attention to YouTube, you may have noticed that the video play button does not simply switch to a pause icon when clicked, but morphs very quickly between states. This is accomplished via SVG, controlled with JavaScript. Here, I’ll show my variation of the UI pattern.

如果您密切关注YouTube，您可能已经注意到，视频播放按钮在单击时不仅会切换为暂停图标，而且会在各个状态之间快速变化。 这是通过受JavaScript控制的SVG完成的。 在这里，我将展示UI模式的各种变化。

制定变形目标 (Making the Morph Targets)

SVG morphs require that the “from” and “to” elements contain the same number of points. SVG is also limited in that it cannot “split” a closed element to morph into two separate paths. Therefore, making the play button in SVG means “hiding” the extra points needed for the pause state (8 points or more) inside the “play” button (which needs only 3 points). It also means making the play button in two separate parts, while appearing to be one object.

SVG变形要求“ from”和“ to”元素包含相同数量的点。 SVG还受到限制，因为它无法“拆分”一个封闭的元素以变形为两条单独的路径。 因此，在SVG中制作播放按钮意味着“隐藏”暂停状态所需的额外点(8点或更多)(仅需要3点)。 这也意味着将播放按钮分成两个单独的部分，同时看起来像是一个对象。

I made a triangle in Adobe Illustrator on a 50 × 50 pixel artboard. Locking that drawing on its own layer, I built two separate elements on top, matching the shape:

我在Adobe Illustrator中的50×50像素画板上制作了一个三角形。 将图形锁定在自己的图层上，我在顶部构建了两个单独的元素，以匹配形状：

The construction of the play element

游戏元素的构造

Both elements overlap in the middle. Note that the right triangle has five points, rather than four, to retain the arrow shape; the rightmost three points are in separate positions, but they could be overlapped with each other.

两个元素在中间重叠。 请注意，直角三角形保留五个点而不是四个点，以保留箭头形状。 最右边的三个点位于不同的位置，但是它们可以彼此重叠。

Exported as SVG and with cleaned up code, the resulting markup looks like this:

导出为SVG并使用清理后的代码，结果标记如下所示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" id="playpause" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Play</title>
    <polygon points="12,0 25,11.5 25,39 12,50" id="leftbar" />
    <polygon points="25,11.5 39.7,24.5