SVG 图案

SVG <pattern> 元素允许我们在 SVG 标记内定义图案，并使用这些图案作为 fill。图案的基本流程如下

• 在 SVG 内定义一个 <pattern>
• 在图案内定义形状
• 使用形状
• 创建一个新的形状并用图案填充它

这是一个作为图案使用的简单 SVG 形状的集合。此列表可能会随着时间的推移而增长，但其目的并非提供一个全面的集合，而是将语法作为创建新颖有趣的图案的起点。

我们还在 CodePen 上保留了这些图案的 集合。

圆形图案

<svg width="100%" height="100%">
  
  <!-- Create mask that we'll use to define a slight gradient -->
  <mask maskUnits="userSpaceOnUse" id="fade">
    <!-- Here's that slight gradient -->
     	<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0" style="stop-color: #FFFFFF"></stop>
      <stop offset="1" style="stop-color: #000000"></stop>
    </linearGradient>
    <!-- The canvas for our mask -->
    <rect fill="url(#gradient)" width="100%" height="100%"></rect>
  </mask>
    
  <!-- Let's define the pattern -->
  <!-- The width and height should be double the circle radius we plan to use -->
  <pattern id="pattern-circles" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
    <!-- Now let's draw the circle -->
    <!-- We're going to define the `fill` in the CSS for flexible use -->
    <circle mask="url(#fade)" cx="20" cy="20" r="20"></circle>
  </pattern>
  <!-- The canvas with our applied pattern -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)"></rect>
  
</svg>

棋盘格图案

<svg width="100%" height="100%">
    
  <!-- Let's define the pattern -->
  <!-- The width and height should be double the size of a single checker -->
  <pattern id="pattern-checkers" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
    <!-- Two instances of the same checker, only positioned apart on the `x` and `y` axis -->
    <!-- We will define the `fill` in the CSS for flexible use -->
    <rect class="checker" x="0" width="100" height="100" y="0"></rect>
    <rect class="checker" x="100" width="100" height="100" y="100"></rect>
  </pattern>
  
  <!-- Define the shape that will contain our pattern as the fill -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-checkers)"></rect>
  
</svg>

六边形图案

<svg width="100%" height="100%">
   
    <!-- Define the pattern -->
    <pattern id="pattern-hex" x="0" y="0" width="112" height="190" patternUnits="userSpaceOnUse" viewBox="56 -254 112 190">
	    
      <!-- Group the hexagon shapes -->
      <!-- Each path could have a class for more styling/animating options -->
      <!-- We're going to control the fill and stroke in the CSS for flexibility -->
      <g id="hexagon">
        <path d="M168-127.1c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-0.3 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5C167-127,167.5-127.1,168-127.1 L168-127.1z"></path>
        <path d="M112-222.5c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2l-53.4,30.5 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C111-222.4,111.5-222.5,112-222.5L112-222.5z"></path>
        <path d="M168-317.8c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-191 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C167-317.7,167.5-317.8,168-317.8L168-317.8z"></path>
      </g>
  
  </pattern>
   
  <!-- The canvas for our pattern -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-hex)"></rect>
  
</svg>

立方体图案

<svg width="100%" height="100%">
   
   <!-- Define the pattern -->
   <pattern id="pattern-cubes" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16"> 
     
     <g id="cube">
       <!-- We'll apply the `fill` in the CSS for flexibility -->
       <path class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
       <path class="right-shade" d="M10 0l-5 3v5l5 -3"></path>
     </g>
  	
     <!-- Apply the cube shapes -->
     <use x="5" y="8" xlink:href="#cube"></use>
     <use x="-5" y="8" xlink:href="#cube"></use>
   
   </pattern>
   
   <!-- The canvas for our pattern -->
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)"></rect>
  
</svg>

人字形图案

<svg width="100%" height="100%"><svg width="100%" height="100%">
   
   <!-- Define the pattern -->
   <pattern id="pattern-chevron" x="0" y="0" patternUnits="userSpaceOnUse" width="100" height="180" viewBox="0 0 10 18"> 
     
     <!-- Group the chevron shapes -->
     <g id="chevron">
       <!-- Chevron consists of two shapes, a left and a right to form a `v` -->
       <!-- We'll apply the `fill` in the CSS for flexibility -->
       <path class="left" d="M0 0l5 3v5l-5 -3z"></path>
       <path class="right" d="M10 0l-5 3v5l5 -3"></path>
     </g>
  	
     <!-- Apply the shapes -->
     <!-- `y="9"` narrows the space between rows  -->
     <use x="0" y="9" xlink:href="#chevron"></use>
   
   </pattern>
   
   <!-- The canvas for our pattern -->
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-chevron)"></rect>
  
</svg>

---

如果您想实时使用图案的不同属性进行尝试，以了解图案的工作原理，请尝试以下操作