递归模式_递归SVG模式第2部分

最新推荐文章于 2021-05-25 09:02:21 发布

cungui5726

最新推荐文章于 2021-05-25 09:02:21 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

文章标签： java css js spring vue ViewUI

原文链接：https://thenewcode.com/1147/Recursive-SVG-Patterns-Part-2

本文介绍了一种使用SVG元素递归构建复杂图案的方法。通过单个多边形元素，结合CSS和SVG的引用与变换功能，逐步创建出精细的图案设计。文章详细解释了递归过程，包括元素的引用、变换和缩放，最终形成完整的设计。

递归模式

In the previous SVG patterns article, I demonstrated how to build an illustration recursively, using a single element. This next version is more complex, demonstrating how to build patterns from nested, referenced groups.

在之前的SVG模式文章中，我演示了如何使用单个元素递归构建插图。下一个版本更加复杂，展示了如何从嵌套的引用组构建模式。

The entire pattern is built from a single polygon:

整个模式由一个多边形构成：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        viewBox="0 0 562.6" 325">
    <polygon id="base" points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" />
</svg>

I find it easier to build a complex design like this inside a standard viewBox, moving it to the final syntax later, since once it moves inside a <pattern> the element will be invisible by default, until it is referenced.

我发现在标准viewBox构建像这样的复杂设计会比较容易，以后viewBox移动到最终语法中，因为一旦它在<pattern>移动，该元素在默认情况下将是不可见的，直到被引用为止。

The design has some basic CSS applied:

该设计应用了一些基本的CSS ：

polygon { 
    fill: none; 
    stroke: rgba(0,0,0,0.3); 
    stroke-width: 3; 
}

Due to the fact that strokes scale in thickness in their associated elements, the rgba color will help create lighter copies.

由于笔画在其相关元素中的厚度会按比例缩放，因此rgba颜色将有助于创建更浅的副本。

The “base” polygon element is at the root of an extended group of elements:

“基础”多边形元素位于一组扩展元素的根部：

<g id="group">
    <polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" 
    id="base" />

Each variant of the original polygon is referenced via an xlink, and provided with its own id, becoming the template for further variants, inside its own group:

原始多边形的每个变体都通过xlink引用，并提供自己的id ，成为其自身组内其他变体的模板：

<g id="group">
    <polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" id="base" />
        <g id="basetwist" >
            <use xlink:href="#base" transform="rotate(90 280 162.5) translate(116, 67) scale(.58)" id="base_level1" />

The full pattern:

完整模式：

<g id="group">
    <polygon points="281.4,0 375.2, 162.5 281.4, 325 187, 161.5" id="base" />
        <g id="basetwist" >
            <use xlink:href="#base" transform="rotate(90 280 162.5) translate(116, 67) scale(.58)" id="base_level1" />
            <g id="diamond"> 
                <use xlink:href="#base" transform="translate(188.85, 108) scale(.33)" id="base_level2" />
                <g id="sidediamond">
                    <use xlink:href="#base_level1" transform="translate(188.85, 108) scale(.33)" id="base_level3" />
                    <use xlink:href="#base_level2" transform="translate(188.85, 108) scale(.33)" id="base_level4" />
                    <use xlink:href="#base_level3" transform="translate(188.85, 108) scale(.33)" /> 
                    <use xlink:href="#base_level4" transform="translate(188.85, 108) scale(.33)" />
                </g>
            </g>
        <use xlink:href="#sidediamond" transform="translate(62,0)" />
        <use xlink:href="#sidediamond" transform="translate(-62,0)" />
        <use xlink:href="#diamond" transform="translate(0,-107)" />
        <use xlink:href="#diamond" transform="translate(0, 107)" />
    </g>
</g>

Note the the #base_level elements are true recursions: each element uses the previous version, and uses the same transform and translate values to create smaller copies.

请注意， #base_level元素是真实的递归：每个元素使用以前的版本，并使用相同的transform和translate值来创建较小的副本。

Creating the full design means referencing what has been built up so far as a single group, still working inside the <pattern>. First, we create multiple copies of the pattern, rotated from the top and bottom points of the original shape:

创建完整的设计意味着引用到目前为止已构建的单个组，仍然在<pattern>内部工作。首先，我们从原始形状的顶部和底部旋转创建图案的多个副本：

<g id="tesselation">
    <use xlink:href="#group" />
    <use xlink:href="#group" transform="rotate(60 281 0)" />
    <use xlink:href="#group" transform="rotate(-60 281 0)" />
    <use xlink:href="#group" transform="rotate(-60 281 325)" />
    <use xlink:href="#group" transform="rotate(60 281 325)" />
    …
</g>

Still inside this group, further translated copies are made:

仍在此组中，进一步翻译了副本：

<g id="vert">
        <use xlink:href="#group" transform="translate(-282, -162)" />
        <use xlink:href="#group" transform="translate(-282, 162)" />
    </g>
    <use xlink:href="#vert" transform="translate(564, 0)" />

使用图案 (Using the pattern)

Using the pattern in a page involves creating a rectangle and filling it with the final, complete pattern:

在页面中使用图案需要创建一个矩形，并用最终的完整图案填充它：

<rect width="100%" height="100%" fill="url(#tesselation)" />

You can also find the complete pattern and code on CodePen.

您还可以在CodePen上找到完整的模式和代码。

翻译自: https://thenewcode.com/1147/Recursive-SVG-Patterns-Part-2

递归模式