我們如何創建一個在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中文網其他相關文章！