當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/3/26 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 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折線 (重復三次)實現的：

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 ：

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的文件：

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

總結

以上是生活随笔為你收集整理的ui svg 转纯svg_带有SVG和边框图像的高科技UI元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java-htttp-远程访问之Rest
下一篇：电力系统谐波的产生与危害