界面上展示svg图片_使用SVG创建SciFi用户界面元素

界面上展示svg图片

For some reason, clipped corners on UI elements is visual shorthand for “the future”. You can see the design style everywhere, especially in video games.

由于某些原因，UI元素上的弯角是“未来”的直观速记。 您到处都能看到设计风格，尤其是在视频游戏中。

In the past, this clipped UI effect would be achieved on web pages through the use of static image elements, immediately limiting the flexibility and range of their application. The growing closeness of SVG and CSS makes it possible to approach the design problem from another angle entirely.

过去，通过使用静态图像元素可以在网页上实现这种裁剪的UI效果，立即限制了其应用的灵活性和范围。 SVG和CSS的紧密联系使从另一个角度完全解决设计问题成为可能。

You may be familiar with the CSS clip property, which effectively crops elements. clip is limited to rectangular shapes, but a recent addition to the spec, clip-path, allows the clipping area to take any polygonal shape. Plotted as a series of x and y coordinates, the clipping path describes the vertices of a polygon:

您可能熟悉CSS clip属性，该属性有效地clip元素。 clip仅限于矩形形状，但是最近在规范中添加了clip-path ，允许裁剪区域采用任何多边形形状。 裁剪路径绘制为一系列x和y坐标，描述了多边形的顶点：

clip-path: polygon(0px 0px, 245px 0px, 285px 50px, 285px 80px, 40px 80px, 0px 30px);

You could easily gain the position of these points from a drawing in Adobe Illustrator or some other vector editing program, or from an SVG illustration, from which the syntax is derived, and to which we will return in a moment.

您可以从Adobe Illustrator或其他矢量编辑程序中的图形或SVG插图中轻松获得这些点的位置，从中可以得出语法，稍后我们将返回这些语法。

应用裁剪效果 (Applying Clipping Effects)

Given the following HTML:

鉴于以下HTML：

<nav id="futurebar">
	<a href="#"> Mathematics</a>
	<a href="#">Rocketry</a>
	<a href="#">Astronomy</a>
</nav>

…we can use the following CSS to size and clip the links:

…我们可以使用以下CSS来调整和裁剪链接：

#futurebar a {
	display: inline-block;
	width: 285px; height: 80px;
	background-image: url(flask.jpg);  
	-webkit-clip-path: polygon(0px 0px, 245px 0px, 285px 50px, 285px 80px, 40px 80px, 0px 30px);
	font-family: Agenda-Light, sans-serif;
	text-decoration: none;
	background-position: top center;
	background-size: cover;
	font-size: 3rem; color: #fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

Note that the links have deliberately been made the same size as the extent of the clipping area (80 pixels tall by 285 pixels wide). They could be made smaller, but it’s important to understand that the clipping area will not “shrink to fit”: as it is implemented here, clip-path creates a mask of a fixed size.

请注意，故意将链接的大小设置为与剪切区域的大小相同(高80像素，宽285像素)。 它们可以做得更小，但是重要的是要了解剪切区域不会“缩小以适合”：在此处实现时， clip-path会创建固定大小的蒙版。

剪辑跨浏览器 (Clipping Cross-Browser)

clip-path currently requires vendor prefixes, with Webkit being the only browser rendering engine to support the property directly at the moment. Firefox and IE9+ can achieve the same result by referencing an SVG file that contains the same vertex information. At the bottom of the HTML document that contains the links, add the following:

clip-path当前需要供应商前缀 ，而Webkit是目前唯一直接支持该属性的浏览器渲染引擎。 Firefox和IE9 +可以通过引用包含相同顶点信息的SVG文件来实现相同结果。 在包含链接的HTML文档的底部，添加以下内容：

<svg width="0px" height="0px">
	<defs>
		<clipPath id="shape">
			<polygon points="0 0, 245 0, 285 50, 285 80, 40 80, 0 30" />
		</clipPath>
	</defs>
</svg>

Note the <defs> and <clipPath> elements, and the fact that the polygon points exactly match those given in the earlier CSS, without px suffixes. The SVG is given a width and height of 0, common when SVG is embedded as a page solely as a filter, so that the SVG element does not reserve any space for itself on the HTML page.

请注意<defs>和<clipPath>元素，以及多边形点与早期CSS中给定的多边形点完全匹配且没有px后缀的事实。 SVG的width和height为0 ，这在SVG仅作为过滤器作为页面嵌入页面时很常见，因此SVG元素不会在HTML页面上为其自身保留任何空间。

In the CSS declaration for the links, add the following:

在链接CSS声明中，添加以下内容：

clip-path: url(#shape);

That’s it: you now have a clipping path template working across browsers that you can apply to repeated elements.

就是这样：您现在拥有一个跨浏览器工作的剪切路径模板，您可以将其应用于重复的元素。

制作动态背景 (Making a Dynamic Background)

To make the background “fade” dynamically, we can add markup inside the links:

为了动态地使背景“淡入淡出”，我们可以在链接内添加标记：

<nav id="futurebar">
	<a href="#"><span>Mathematics</span></a>
	<a href="#"><span>Rocketry</span></a>
	<a href="#"><span>Astronomy</span></a>
</nav>

And add the following to our CSS:

并将以下内容添加到我们CSS中：

#futurebar a span {
	background: rgba(0,0,0,0.4);
	display: block;
	width: 100%; height: 100%;
	transition: .8s;
	padding-top: .7rem;
	padding-left: 3rem;
}
#futurebar a:hover span {
	background: rgba(0,0,0,0);
}

优点和缺点 (Upsides & Downsides)

clip-path does have a nice progressive enhancement aspect: if the browser doesn’t understand that part of the spec, the link will be shown as simply a rectangular shape. There’s just one issue, aside from the fixed dimensions of the masks: as you can see if you move your cursor to the corners of each link, the <a> element’s active “hot spot” extends to its regular rectangular area, outside the clipping path. In an interface like the one shown here, that won’t matter much, but it can be significant if the clipping shape is more extreme, such as an octagon. In that case, you’d probably want to make the interface elements entirely in SVG, where their active areas can be clipped exactly to the shape, as I show in my Interactive SVG Map example. I’ll delve deeper into those possibilities in the near future.

clip-path确实具有一个很好的渐进增强方面：如果浏览器不理解规范的那一部分，则链接将仅显示为矩形。 除了蒙版的固定尺寸外，只有一个问题：如您所见，是否将光标移动到每个链接的角， <a>元素的活动“热点”延伸到剪裁之外的规则矩形区域路径。 在此处所示的界面中，这无关紧要，但是如果裁剪形状更极端，例如八边形，则可能意义重大。 在这种情况下，您可能希望完全使用SVG制作界面元素，可以将它们的活动区域精确地裁剪为形状，如我在“ 交互式SVG贴图”示例中所示。 我将在不久的将来更深入地探讨这些可能性。

翻译自: https://thenewcode.com/796/Create-SciFi-User-Interface-Elements-With-SVG

界面上展示svg图片