ui svg 转纯svg_带有SVG和边框图像的高科技UI元素

ui svg 转纯svg

It’s uncertain when the design motif originated - perhaps with the original 1980’s Battlestar Galactica TV series - but there’s something about clipped corners that screams “high tech” to viewers. Unfortunately, creating that appearance has been rather difficult in web design. Lea Verou outlined some clever ways to achieve clipped corners in her recent CSS Secrets book, but I thought up a few alternatives:

尚不清楚该设计主题是何时产生的-也许是1980年的太空堡垒卡拉狄加电视剧集的最初版本-但弯角处有一些东西向观众大叫“高科技”。 不幸的是，在网页设计中创建这种外观非常困难。 Lea Verou在她最近的《 CSS Secrets 》 ( CSS秘密)书中概述了一些巧妙的方法来实现快速发展，但是我想出了一些替代方法：

为什么不使用背景图像？ (Why Not Use Background Images?)

An instinctual reaction to this design goal might be to use background-image. Unfortunately, there are a few problems with that approach:

对本设计目标的本能React可能是使用background-image 。 不幸的是，这种方法存在一些问题：

• size and resolution are obviously factors, unless you use SVG.

  大小和分辨率显然是因素，除非您使用SVG 。

• whatever you do with it, the effect will almost certainly stretch in odd ways as the viewport is resized.
  无论您使用它做什么，随着调整视口大小，效果几乎肯定会以奇怪的方式扩展。
• it’s difficult to get a truly transparent clipped corner while making the rest of the element solid.
  在使元素的其余部分牢固的同时，很难获得真正透明的剪切角。

SVG, coupled with border-image, addresses all of those limitations.

SVG加上border-image可解决所有这些限制。

支撑角 (Braced Corners)

The first example shows not clipped, but “braced” corners. This is achieved by using a primitive SVG polyline, duplicated three times:

第一个示例显示的不是修剪，而是“支撑”的角。 这是通过使用原始的SVG折线 (重复三次)实现的：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" 
xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <polyline points="0,3 0,0 3,0" id="brace" fill="none" stroke="#fff" />
    <use xlink:href="#brace" transform="rotate(90, 5, 5)" />
    <use xlink:href="#brace" transform="rotate(180, 5, 5)" />
    <use xlink:href="#brace" transform="rotate(270, 5, 5)" />
</svg>

The SVG viewport is a 10 × 10 unit box, and the SVG is sized to 100px × 100px.

SVG视口是一个10×10的单位框，SVG的大小为100px×100px。

Note that the copies are rotated around the center of the SVG (i.e. at coordinates 5, 5). You may want to provide the brace with a different stroke and change it later, as otherwise you’ll likely see white polylines on a white background when looking at the SVG by itself, i.e. nothing at all.

请注意，副本围绕SVG的中心旋转(即在坐标5、5)。 您可能需要为支架提供不同的笔触，然后再进行更改，否则，单独查看SVG时，您可能会在白色背景上看到白色的折线，也就是一无所获。

This SVG is applied to a container element as a border-image; in this case, that element is a <div> with an id of braced-corners:

该SVG作为border-image应用于容器元素； 在这种情况下，该元素是id为braced-corners的<div> ：

* { box-sizing: border-box; }
#braced-corners { 
    border-image: url(brace.svg) 50 50; 
    background-color: rgba(255,255,255,0.3);
    border-style: inset;
    border-width: 30px;
    transition: .8s;
}

A few notes:

一些注意事项：

• unlike bitmaps, when border-image uses an SVG the units following the URL are interpreted as percentages, not pixels

  与位图不同，当border-image使用SVG时，URL后的单位被解释为百分比 ，而不是像素

• in this case, the 50 50 implies that the SVG is divided into even quadrants, with the “cut lines” at 50% and 50% slicing through the exact center of the element vertically and horizontally.

  在这种情况下， 50 50表示将SVG划分为偶数象限，其中“切割线”分别以50％和50％的比例沿垂直和水平方向穿过元素的确切中心。

• Firefox insists on a border-style being present in the declaration, even though the inset effect will not be visible.

  Firefox坚持在声明中使用border-style ，即使inset效果将不可见。

• the border-width determines the “extent” of the bracing; increasing it will “push” the content deeper into its container while making the braces larger.

  border-width决定支撑的“范围”； 增加它可以将内容“推”到更深的容器中，同时使括号更大。

• transition isn’t necessary at this point, but will be used in a moment.

  transition在这一点上不是必需的，但稍后会使用。

We can also use SVG to create a grid background for the container as a separate file, which I’ll call grid.svg:

我们还可以使用SVG为容器创建一个网格背景作为单独的文件，我将其称为grid.svg ：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <g stroke="rgba(255,255,255,0.1)">
    <line x1="0" y1="0" x2="10" y2="0" />
    <line x1="0" y1="0" x2="0" y2="10" />
  </g>
</svg>

In this case, the grid is made up of almost completely transparent white lines. Applied to the same container element in CSS:

在这种情况下，网格由几乎完全透明的白线组成。 应用于CSS中的同一容器元素：

#braced-corners { 
    background-image: url(grid.svg);
    padding: 0 2% 0 2%;
    background-size: 3%;
}

Interestingly, we can transition both on hover to provide a “focus” effect, which you can see in the example above:

有趣的是，我们可以在悬停时进行过渡 ，以提供“焦点”效果，您可以在上面的示例中看到：

#braced-corners:hover {
  border-image: url(brace.svg) 25 25; 
  background-size: 2%;
}

Unfortunately, Firefox messes this up by replicating the braces across the edges of the container on focus, an issue that needs more work and attention.

不幸的是，Firefox通过在焦点对准容器边缘的位置复制括号来解决这个问题，这个问题需要更多的工作和关注。

夹角 (Clipped Corner)

The original clipped corner effect takes a similar approach. First, the basic shape is created as a file named clipped-corner.svg:

原始的修剪角效果采用类似的方法。 首先，将基本形状创建为名为clipped-corner.svg的文件：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" 
width="500px" height="500px">
    <polyline points="0,1 1,0 10,0 10,10 0,10" fill="rgba(255,255,255,0.3)" stroke="none" />
</svg>

Visually, the SVG looks like this (filled with black for visibility):

在视觉上，SVG看起来像这样(用黑色填充可见性)：

It’s then applied to the container element:

然后将其应用于容器元素：

#clipped-corners {
    border-image: url(clipped-corner.svg) 50 50 repeat repeat; 
    border-style: outset;
    border-width: 25px;
}

There’s just one problem: true to its name, the border-image takes care of the border of the element, not it’s interior, creating a result that looks like this:

有一个问题：真正意义上的border-image照顾元素的边界 ， 而不是内部的边界 ，从而产生一个看起来像这样的结果：

This presents something of a quandary: we can’t use background-color to fill the space, as that will also flood the cut-off corner. I hit on the idea of using an inset box-shadow with the same color as the SVG border-image:

这带来了一个难题：我们不能使用background-color来填充空间，因为这也会淹没截止角。 我想到了使用与SVG border-image相同颜色的插入box-shadow的想法：

#clipped-corners {
    box-shadow: inset rgba(255,255,255,0.3) 0 0 0 250px;
}

Using an appropriate amount of spread with no blur, this fills the center of the container without affecting the corners. The background-image of the grid can then be applied as normal: the cut-off corner will always appear as a 45° angle, even as the elements are resized.

使用适当数量的spread而不会模糊，这将填充容器的中心而不会影响角落。 然后可以正常应用网格的background-image ：即使调整了元素的大小，截止角也会始终显示为45°角。

Eagle-eyed readers may notice that the grid background image actually flows over the cut-off corner. This could be taken care of with clip-path, but the CSS implementation currently does not cut-off background images.

鹰眼的读者可能会注意到，网格背景图像实际上在截止角上流动。 可以使用clip-path ，但是CSS实施目前不能切断背景图像。

翻译自: https://thenewcode.com/17/High-Tech-UI-Elements-with-SVG-and-Border-Image

ui svg 转纯svg