SciFi UI II：具有图像切换功能的六角形按钮

最新推荐文章于 2024-09-25 08:04:54 发布

cungui5726

最新推荐文章于 2024-09-25 08:04:54 发布

阅读量259

点赞数

文章标签： java css html python js ViewUI

原文链接：https://thenewcode.com/817/SciFi-UI-II-Hexagonal-Buttons-With-Image-Switching

版权

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上找到并使用该示例。

步骤1：建立基本元素 (Step 1: Create the basic elements)

You could plot the outline of the button in an SVG document by hand, or use of vector illustration application: most developers will choose the latter, so that’s what I’ll do here. For the sake of clarity, I’ll focus on creating just one button.

您可以手动在SVG文档中绘制按钮的轮廓，或者使用矢量图应用程序：大多数开发人员都会选择后者，所以这就是我在这里要做的。为了清楚起见，我将重点放在仅创建一个按钮上。

First, I made a 500px × 500px artboard in Illustrator, placed and sized two square bitmap images to fill the space exactly, and drew a hexagon on top. You’ll want to ensure that each of these elements has an appropriate layer name. In my example, the bitmap images are both PNG files; the uppermost one has a partially transparent alpha mask.

首先，我在Illustrator中制作了一个500px×500px的画板，放置并调整两个正方形位图图像的大小以准确填充该空间，并在顶部绘制了一个六边形。您将要确保每个这些元素都具有适当的图层名称。在我的示例中，位图图像都是PNG文件。最上面的一个具有部分透明的alpha蒙版。

You can add text to the button in Illustrator at this stage, but that’s easy enough to do in the next step.

您可以在此阶段将文本添加到Illustrator中的按钮，但这很容易在下一步中完成。

Before exporting the SVG file from Illustrator, I’ll convert the hexagon into a Compound Path by right-clicking on it, as polygons cannot be used as clipping paths.

从Illustrator导出SVG文件之前，我将通过右键单击六边形将其转换为“复合路径”，因为多边形不能用作剪切路径。

步骤2：剪辑元素 (Step 2: Clip the elements)

After a basic cleanup of the SVG code, we’re left with something that looks like this:

在基本清理了SVG代码之后，剩下的东西看起来像这样：

<svg xmlns="http://www.w3.org/2000/svg" id="moon-nav" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
	<path fill="#FFFFFF" stroke="#231F20" d="M127.9,458.6L5.5,246.7l122.4-212h244.8l122.4,212l-122.4,212 H127.9z" />
	<image width="500" height="500" id="hexagon-pattern" xlink:href="orange-hexagon.png" >
	</image>
	<image width="500" height="500" id="luna" xlink:href="luna.png" >
	</image>
</svg>

An alpha masked photograph of the Saturnian moon Io

To create the clipping effect, we’re going to add a clipPath around the path and images, referencing the id of the clipping area from the images. If you haven’t added text, we’ll do that here too: note the x and y positioning information. Finally, we’ll link the button as a whole:

为了创建剪切效果，我们将在路径和图像周围添加一个clipPath ，并引用图像中剪切区域的id 。如果您尚未添加文本，我们也将在此处进行操作：请注意x和y定位信息。最后，我们将整个按钮链接起来：

<svg xmlns="http://www.w3.org/2000/svg" id="moon-nav" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
	<a xlink:href="http://www.google.com/moon/" title="Luna">
		<clipPath id="moon">
			<path fill="#FFFFFF" stroke="#231F20" d="M127.9,458.6L5.5,246.7l122.4-212h244.8l122.4,212l-122.4,212 H127.9z" />
		</clipPath>
		<image width="500" height="500" clip-path="url(#moon)" id="hexagon-pattern" xlink:href="orange-hexagon.png" >
		</image>
		<image width="500" height="500" clip-path="url(#moon)" id="luna" xlink:href="luna.png" >
		</image>
		<text x="150" y="250" id="lune">LUNA</text>
	</a>
</svg>

步骤3：添加CSS (Step 3: Add CSS)

Right now the images don’t have any interactivity. We can change that by adding some CSS to the SVG file, immediately after the opening <svg> tag:

目前，这些图像没有任何交互性。我们可以通过在打开<svg>标签之后立即将一些CSS添加到SVG文件中来进行更改：

svg#moon-nav image {
	opacity: 0;
	transition: 1s opacity;
}
svg#moon-nav a:hover image { 
	opacity: 1;
}
svg#moon-nav a text {
	font-family: Verdana, sans-serif;
	font-size: 65px; fill: #fff;
}

步骤4：在页面上嵌入SVG (Step 4: Embed the SVG on the page)

If we simply reference the SVG file as an <img>, it won’t have any interactivity. Placing the SVG code directly in our HTML is the better option. I’ve added appropriate markup and CSS to make the SVG responsive, and moved the CSS that originally existed in the SVG file for testing purposes into the HTML page’s embedded style sheet.

如果我们仅将SVG文件引用为<img> ，则它将没有任何交互性。最好将SVG代码直接放置在我们HTML中。我添加了适当的标记和CSS以使SVG响应，并将最初存在于SVG文件中CSS(用于测试)移至HTML页面的嵌入式样式表中。

There are other ways to achieve the same result: we could have used CSS masks, or the clip-path property. I’d argue that the SVG approach is slightly more elegant while enjoying better browser support, but you should never consider just “one way” of doing anything.

还有其他方法可以达到相同的结果：我们可以使用CSS蒙版或clip-path属性。我认为SVG方法在享受更好的浏览器支持的同时会稍微更优雅一些，但是您绝对不应该考虑做任何事情的“一种方式”。