svg圆角边框

svg圆角边框

svg圆角边框

The geometrical designs of Greek antiquity tend to be applied in rows and columns, rather than area-filling tiles, reflecting their familiar use on friezes and architraves. As such, they are easiest to make as single tiles, with their repetition created in CSS, rather than SVG.

希腊上古时期的几何设计往往以行和列的形式应用，而不是填充区域的瓷砖，这反映了它们在带状饰物和arch饰上的熟悉用法。 因此，使用CSS (而不是SVG)创建重复，最容易将它们制作为单个图块。

古典希腊曲折 (Classical Greek Meander)

Sometimes referred to as a “Greek key” or “Greek fret”, this pattern is probably the most familiar from classical antiquity. Historically, it may have symbolized eternity or unity; its design also echoes the pattern of the classical labyrinth, together with the waves of the Mediterranean and the twists of a river.

有时被称为“希腊键”或“希腊品格”，这种模式可能是古典古代最熟悉的模式。 从历史上看，它可能象征着永恒或团结。 它的设计也呼应了古典迷宫的图案，以及地中海的波浪和河流的曲折。

Its construction in SVG couldn’t be much simpler. There are just two components: a line and a polyline.

它在SVG中的构造再简单不过了。 只有两个组成部分：一条line和一条多段polyline 。

<svg xmlns="" viewBox="0 0 18 18" xmlns:xlink=""><style type="text/css">line, polyline { fill: none; stroke: #000; stroke-width: 2.5; }</style><line x1="0" y1="1.25" x2="18" y2="1.25" id="border" /><use xlink:href="#border" transform="translate(0 15.5)" /><polyline points="1.25,16.7 1.25,5.7 9.9,5.7 9.9,9.4" id="wave" /><use xlink:href="#wave" transform="rotate(180 7.75 9)" />
</svg>

Employing <use> to make copies of the elements works in our favour: changes to the style of the design are controlled by CSS, as they should be, but changes to the geometry of the line and polyline, such as the treatment of caps and corners, will be instantly reflected in the copies generated by <use>.

使用<use>来复制元素是对我们有利的：对设计样式的更改应由CSS控制(如应有的那样)，但对线和折线的几何形状的更改(例如，帽形和角落，将立即反映在<use>生成的副本中。

Adding this as a decorative border to an HTML element is also quite straightforward:

将其作为装饰性边框添加到HTML元素也非常简单：

div {  background-image: url(meander.svg);background-repeat: repeat-x;background-size: 50px 50px; 
}

This will place the border at the top of the element. If you wanted it on both the top and bottom, you could use two copies of the same referenced file:

这会将边框放在元素的顶部。 如果您想同时在顶部和底部使用它，则可以使用同一引用文件的两个副本：

div {  background-image: url(meander.svg), url(meander.svg);background-repeat: repeat-x;background-size: 50px 50px; background-position: top, bottom;
}

Once you have that basic technique, it’s relatively easy to produce more, including the following:

一旦有了该基本技术，就可以相对容易地产生更多的技术，包括以下内容：

藤曲 (Vine Meander)

Using the same principles, it’s possible to make a simple vine decorative element:

使用相同的原理，可以制作简单的藤蔓装饰元素：

<svg xmlns="" xmlns:xlink="" viewBox="0 0 30 30"><rect y="14.2" width="24.8" height="1.2" id="stem" /><g id="leafpair"><path d="M0.5,0c6,0,16.4,1.3,18,10.5c4.5,2.2,6.2,3.7,6.2,3.7h-2.5l-4.9-2.8c0,0-13.5,0.1-17.4-11.5"/><path d="M0.5,29.5c6,0,16.4-1.3,18-10.5c4.5-2.2,6.2-3.7,6.2-3.7h-2.5L17.4,18c0,0-13.5-0.1-17.4,11.5"/></g>
<use xlink:href="#leafpair" transform="translate(-15,0)" />
<use xlink:href="#leafpair" transform="translate(15,0)" />
</svg>

Recall that almost any HTML element can be provided with a background image, providing the opportunity to make a horizontal rule decorated with a background image:

回想一下，几乎所有 HTML元素都可以提供背景图像，从而有机会制作以背景图像装饰的水平尺 ：

hr { height: 30px;border: none;background-image: url(leaf.svg);opacity: 0.3;
}

The result can be seen at the top of this article, and on the associated CodePen demo.

结果可以在本文的顶部以及相关的CodePen演示中看到 。

With a little more work, it would be possible to turn this pattern into something that curves and twists as it progresses across the page.

通过更多的工作，可以将这种模式转换为在整个页面上逐渐弯曲和扭曲的模式。

简单波浪曲折 (Simple Wave Meander)

The final pattern is in many ways the most basic:

最终模式在许多方面都是最基本的：

<svg version="1.1" xmlns="" viewBox="0 0 16.8 15.2"><polyline fill="none" stroke="#000" stroke-width="3" points="-1,13.8 9.5,13.8 9.5,7.5 4.2,7.5 4.2,1.5 15.2,1.5 15.2,13.8 16.8,13.8 "/>
</svg>

Note that the very first of the stroked polyline is beyond the edges of the viewBox to avoid a tiny spacing issue that will occassionally come up with small SVG patterns rendered as background images.

请注意，描边polyline第一条polyline 超出了viewBox的边缘，以避免出现微小的间距问题，该间距问题有时会呈现为背景图像的小型SVG图案。

It’s also simple to turn this into a geometric pattern that decorates all sides of an element, using border-image with SVG… a combination I will explore in the next article.

使用SVG的border-image将其转换为装饰元素所有侧面的几何图案也很简单，这是我将在下一篇文章中探讨的组合。

翻译自:

svg圆角边框