In a previous article I illustrated how to clip corners on rectangular user interface elements to make them appear “futuristic” using CSS. A similar visual trope is to create UI elements as hexagons, shown in the example above. These hexagons are typically deployed as buttons: on hover, the images in the background of the buttons change. Recently, a reader asked how this kind of effect might be achieved with SVG.
在上一篇文章中，我说明了如何使用CSS在矩形用户界面元素上剪切角，以使其显得“未来派”。 一个类似的视觉效果是将UI元素创建为六边形，如上面的示例所示。 这些六边形通常部署为按钮：悬停时，按钮背景中的图像会更改。 最近，一位读者问到SVG如何实现这种效果。
Six years ago, I would have used CSS image sprites to create this kind of UI. With some minor tweaks, that technique could still be used today, although with some drawbacks. Today, we have strong browser support for SVG, which gives us more options and better results.
六年前，我会使用CSS图像精灵创建此类UI。 经过一些细微的调整，尽管有一些缺点，但该技术仍可以在今天使用。 如今，我们对SVG具有强大的浏览器支持，这为我们提供了更多选择和更好的结果。
The technique I use here for making the hover effect and image switch is somewhat related to the SVG Responsive Animated Imagemap tutorial I shared recently in net magazine. You can find and play with that example on CodePen.
我在此处用于进行悬停效果和图像切换的技术与我最近在net magazine上分享的SVG响应式动画图像映射教程有些相关。 您可以在CodePen上找到并使用该示例 。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/52988.html