SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법

스코틀랜드, 특히 킬트와 동의어 인 상징적 인 패턴 천인 타탄은 tartanify.com의 중심 무대를 차지합니다. 이 사이트는 5,000 개가 넘는 타탄 패턴 (SVG 및 PNG 형식)의 라이브러리를 자랑하며, 제한적인 사용 권한을 가진 사람들을 배제하기 위해 세 심하게 선별되었습니다.

Scottish Summer Holiday 기간 동안 Sylvain Guizard가 생각한이 프로젝트는 처음에 Adobe Illustrator 또는 Sketch와 같은 디자인 소프트웨어를 사용하여 패턴 라이브러리의 수동 생성을 구상했습니다. 그러나 깎아 지른 패턴의 양 (수천!) 은이 접근법을 신속하게 불가능하게 만들었습니다. 획기적인 것은 타르타탄이 정의 된 구조를 가지고 있다는 실현과 함께 이루어졌으며 간단한 문자열을 인코딩 스레드 수와 색상 코드로 표시됩니다.

타탄 구조 및 SVG 표현

타탄의 특징적인 패턴은 직각으로 짜여진 색의 실에서 발생합니다. 수직 및 수평 밴드는 동일한 색상 및 너비 시퀀스를 공유합니다. 이 밴드의 교차로는 시각적으로 혼합 된 색상을 만듭니다. Twill 직조 기술은 독특한 대각선을 추가합니다. 이 기사는 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 (16 진수) 및 size 특성이있는 물체입니다.

 const tartan = [
  {채우기 : "#ff8a00", 크기 : 40},
  // ... 더 많은 줄무늬
];

Tartan 데이터는 종종 "Palette"및 "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 Tartans를 배경 이미지로 사용합니다

Tartanify.com에서 각 Tartan은 전체 화면 배경 이미지입니다. 이를 위해서는 SVG를 데이터 URI로 인코딩해야합니다.

 .BG- 요소 {
  백그라운드 이미지 : URL ( 'data : 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, 너비, 높이, filename = "file"}) => {
  // ... (캔버스를 생성하는 코드, SVG 그리기 및 데이터 URL을 얻는 코드) ...
  반품 (
    <a download="{`${fileName}.png`}" ref="{aEl}">PNG로 다운로드하십시오</a>
  );
};

정적 사이트 생성을위한 개츠비

Tartanify.com은 React 기반 정적 사이트 생성기 인 Gatsby를 활용합니다. gatsby-config.js 파일에는 CSV 데이터 처리를위한 플러그인이 포함되어 있습니다.

 // gatsby-config.js
module.exports = {
  / * ... */
  플러그인 : [
    '개츠비-트랜스 포머 -CSV',
    {
      결의 : '개츠비-소스 파일 시스템',
      옵션 : {
        경로 :`$ {__ dirname}/src/data`,
        이름 : '데이터',
      },
    },
  ],,
};

gatsby-node.js 파일은 Gatsby의 노드 API를 사용하여 각 Tartan 및 Paginated Letter 기반 인덱스 페이지에 대한 페이지를 작성하여 슬러그 생성 및 Pagination을 처리합니다. Tartan Templates ( tartan.js ) 및 Index Templates ( tartans.js )는 이전에 생성 된 React 구성 요소를 사용합니다. Paginated Index 페이지 간의 탐색은 TartansNavigation 구성 요소에 의해 관리됩니다.

이 자세한 설명은 tartanify.com 프로젝트의 핵심 측면을 다룹니다. 전체 코드는 Github에서 사용할 수 있습니다. 이 프로젝트는 매력적인 부업 프로젝트를 통해 새로운 기술을 배우는 재미 있고 효과적인 방법을 보여줍니다.

위 내용은 SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!