我们如何创建一个在SVG中生成格子呢模式的静态站点

格子呢，标志性的图案布与苏格兰的代名词，尤其是其苏格兰语，在Tartanify.com上占据了中心地位。该站点拥有超过5,000种格子呢模式（以SVG和PNG格式）的图书馆，并精心策划，以排除具有限制性使用权的人。

该项目是由Sylvain Guizard在苏格兰暑假期间构想的，最初使用Adobe Illustrator或Sketch（例如Adobe Illustrator）的设计软件设想了手动创建模式库。但是，大量的图案（成千上万！）迅速使这种方法站不住脚。突破性的是意识到格子呢具有定义的结构，并由编码线程计数和颜色代码的简单字符串表示。

格子呢结构和SVG表示

格子呢的特征模式是由以直角交织的颜色线引起的。垂直和水平带具有相同的颜色和宽度序列。这些频带的交叉点会产生视觉混合的颜色。斜纹编织技术增加了独特的对角线。本文使用SVG矩形作为线程重新创建此效果：

让我们检查这个SVG结构：

<svg height="280" viewbox="0 0 280 280" width="280" x="0" xmlns="http://www.w3.org/2000/svg" y="0"><defs><mask height="1" width="1" x="0" y="0"><rect fill="url(#diagonalStripes)" height="100%" width="100%" x="0" y="0"></rect></mask></defs><g><rect fill="#FF8A00" height="40" width="100%" x="0" y="0"></rect><rect fill="#E52E71" height="10" width="100%" x="0" y="40"></rect><rect fill="#FFFFFF" height="10" width="100%" x="0" y="50"></rect><rect fill="#E52E71" height="70" width="100%" x="0" y="60"></rect><rect fill="#100E17" height="20" width="100%" x="0" y="130"></rect><rect fill="#E52E71" height="70" width="100%" x="0" y="150"></rect><rect fill="#FFFFFF" height="10" width="100%" x="0" y="220"></rect><rect fill="#E52E71" height="10" width="100%" x="0" y="230"></rect><rect fill="#FF8A00" height="40" width="100%" x="0" y="240"></rect></g><g mask="url(#grating)"><rect fill="#FF8A00" height="100%" width="40" x="0" y="0"></rect><rect fill="#E52E71" height="100%" width="10" x="40" y="0"></rect><rect fill="#FFFFFF" height="100%" width="10" x="50" y="0"></rect><rect fill="#E52E71" height="100%" width="70" x="60" y="0"></rect><rect fill="#100E17" height="100%" width="20" x="130" y="0"></rect><rect fill="#E52E71" height="100%" width="70" x="150" y="0"></rect><rect fill="#FFFFFF" height="100%" width="10" x="220" y="0"></rect><rect fill="#E52E71" height="100%" width="10" x="230" y="0"></rect><rect fill="#FF8A00" height="100%" width="40" x="240" y="0"></rect></g></svg>

水平和垂直条带组创建了相同的正方形，但是垂直的正方形被掩盖，仅揭示了水平和垂直线相交的白色区域。反映编织的图案面具是通过定义图案瓷砖来实现的：

patternUnits属性从objectBoundingBox更改为userSpaceOnUse ，指定像素的宽度和高度。

<svg height="0" width="0"><defs><pattern height="8" patternunits="userSpaceOnUse" width="8" x="0" y="0"><polygon fill="white" points="0,4 0,8 8,0 4,0"></polygon><polygon fill="white" points="4,8 8,8 8,4"></polygon></pattern></defs></svg>

与React自动化格子呢

手动SVG方法是使用React自动化的。 SvgDefs组件生成<defs></defs>标记：

 const svgdefs =（）=> {
  返回 （
    <defs><pattern height="8" patternunits="userSpaceOnUse" width="8" x="0" y="0"><polygon fill="#ffffff" points="0,4 0,8 8,0 4,0"></polygon><polygon fill="#ffffff" points="4,8 8,8 8,4"></polygon></pattern><mask height="1" width="1" x="0" y="0"><rect fill="url(#diagonalStripes)" height="100%" width="100%" x="0" y="0"></rect></mask></defs>
  ）
}

格子呢表示为条纹阵列。每个条纹都是带有fill （十六进制颜色）和size属性的对象：

 const tartan = [
  {填充：“＃ff8a00”，大小：40}，
  // ...更多条纹
];

格子呢数据通常以“调色板”和“ ThreadCount”字符串出现：

 <code>// Palette O#FF8A00 P#E52E71 W#FFFFFF K#100E17 // Threadcount O/40 P10 W10 P70 K/10.</code>

（这些字符串向条纹阵列的转换以单独的要旨详细介绍。）

SvgTile组件从tartan阵列生成SVG结构：

 const svgtile =（{{tartan}）=> {
  // ...（计算条纹位置和总尺寸的代码）...
  返回 （
    <svg height="{size}" viewbox="{`0" width="{size}" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
      <svgdefs></svgdefs>
      {/ * ...（代码生成水平和垂直条纹的矩元素）... */}
    </svg>
  ）
}

使用SVG塔塔塔人作为背景图像

在Tar​​tanify.com上，每个格子呢都是全屏背景图像。这需要将SVG编码为数据URI：

 .bg-element {
  背景图像：URL（'数据：Image/svg XML; charset = utf-8，<svg> ...</svg> '）;
}

SvgBg组件以编码的SVG作为其背景创建一个全屏Div：

 const svgbg =（{tartan}）=> {
  const tartanstr = reactdomserver.rendertostaticmarkup（<svgtile tartan="{tartan}"></svgtile> ）；
  const tartandata = encodeuricomponent（tartanstr）;
  返回 （
    <div style="{{" backgroundimage: xml width: height:></div>
  ）；
};

可下载的SVG和PNG tartans

SvgDownloadLink组件允许SVG下载：

 const svgdownloadlink =（{{svgdata，filename =“ file”}）=> {
  返回 （
    <a download="{`${fileName}.svg`}" href="%7B%60data:image/svg" xml>下载为SVG</a>
  ）；
};

PngDownloadLink组件使用画布生成高分辨率PNG：

 const pngdownloadlink =（{{svgdata，width，height，filename =“ file”}）=> {
  // ...（代码创建画布，绘制SVG并获取数据URL）...
  返回 （
    <a download="{`${fileName}.png`}" ref="{aEl}">下载为PNG</a>
  ）；
};

Gatsby用于静态站点的生成

Tartanify.com利用基于React的静态站点生成器Gatsby。 gatsby-config.js文件包含用于处理CSV数据的插件：

 // gatsby-config.js
Module.exports = {
  / * ... */
  插件：[
    'gatsby-transformer-csv'，
    {
      解决：“ Gatsby-Source-Filesystem”，
      选项： {
        路径：`$ {__ dirname}/src/data'，
        名称：“数据”，
      }，，
    }，，
  ]，，
};

gatsby-node.js文件使用盖茨比的节点API为每个格子呢和基于字母的索引页面创建页面，处理slug生成和分页。格子呢模板（ tartan.js ）和索引模板（ tartans.js ）利用了先前创建的反应组件。分页索引页面之间的导航由TartansNavigation组件管理。

此详细的解释涵盖了Tartanify.com项目的核心方面。完整的代码可在GitHub上找到。该项目通过引人入胜的Side项目展示了一种有趣而有效的学习新技术的方法。

以上是我们如何创建一个在SVG中生成格子呢模式的静态站点的详细内容。更多信息请关注PHP中文网其他相关文章！