SVG圖案 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　給SVG元素應用填充和描邊，除了使用純色和漸變外，還可以使用圖案。本文將詳細介紹SVG圖案

概述

　　<pattern>可以實現重復的效果，在canvas中被翻譯為模式，而在SVG中被翻譯為圖案或筆刷

　　SVG圖案一般用于SVG圖形對象的填充fill或描邊stroke。這個圖形可以是一個SVG元素，也可以是位圖圖像，通過<pattern>元素在x軸或y軸方向以固定的間隔平鋪。

　　在pattern元素內部可以包含任何之前包含過的其它基本形狀，并且每個形狀都可以使用任何樣式樣式化，包括漸變和半透明

　　可以在<pattern>元素內定義圖案，然后通過id引用

　　下面是一個簡單的示例

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1"width=0.2 height=0.2>
        <circle cx="2" cy="2" r="2" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

尺寸設置

　　從上面的例子中，可以看出width和height是必須的屬性，用來表示每一個圖案在圖形中占據的比例。如上所示，width、height值為0.25，則占據25%的比例，則每行可以有5個圖案，每列也可以有5個圖案

　　如果設置width、height值為0.5，則每行每列都有2個圖案

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=0.5 height=0.5>
        <circle cx="2" cy="2" r="2" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

【圖案內的圖形尺寸】

　　如果對圖案內的圖形尺寸進行設置，將會顯示出不同的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=0.2 height=0.2>
        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

　　下面例子中，則圖案width、height值為0.2，即圖形每行每列都包含5個圖案。因此，每個圖案的尺寸是10*10，而圖案中的圖形circle的半徑為5，圓點為(5,5)，則正好可以放下一個圓

坐標系統

　　patternUnits，定義pattern的坐標系統。它的可能值有兩個，userSpaceOnUse和objectBoundingBox

　　userSpaceOnUse:x、y、width和height表示的值都是當前用戶坐標系統的值。也就是說，這些值沒有縮放，都是絕對值

　　objectBoundingBox（默認值）:x、y、width和height表示的值都是外框的坐標系統（包裹pattern的元素）。也就是說，圖案的單位進行了一個縮放，比如：pattern中為1的值，會變成和包裹元素的外框的width和height一樣的大小

　　與漸變不同，pattern有第二個屬性patternContentUnits，它描述了pattern元素基于基本形狀使用的單元系統。它的可能值也有兩個，userSpaceOnUse(默認值)和objectBoundingBox

　　[注意]patternContentUnits的默認值是userSpaceOnUse

　　下面是默認值的情況

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=0.2 height=0.2 patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse">
        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

　　如果使用patternUnits和patternContentUnits都使用objectBoundingBox，要保持原圖案，則需要進行如下設置

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=0.2 height=0.2 patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
        <circle cx="0.1" cy="0.1" r="0.1" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

　　如果使用patternUnits和patternContentUnits都使用userSpaceOnUse，要保持原圖案，則需要進行如下設置

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=10 height=10 patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

　　如果使用patternUnits使用userSpaceOnUse，patternContentUnits使用objectBoundingBox，要保持原圖案，則需要進行如下設置

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=10 height=10 patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
        <circle cx="0.1" cy="0.1" r="0.1" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

位置設置

　　SVG圖案使用x、y屬性來進行位置設置。默認地，x、y屬性為0，即圖案從左上角開始繪制

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=0.2 height=0.2 x=0 y=0  >
        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

　　改變x、y的值，如設置為0.1，則從圓心處開始繪制

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=0.2 height=0.2 x=0.1 y=0.1  >
        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

　　如果使用userSpaceOnUse坐標系統，要保持原圖案，則需要進行如下設置

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=10 height=10 x=5 y=5  patternUnits="userSpaceOnUse" >
        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>
</svg>

描邊

　　當然了，圖案pattern除了用于填充，還可以用于描邊

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=20 height=20  patternUnits="userSpaceOnUse" >
        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="url(#pattern1)" stroke-width="10"/>
</svg>

　　如果圖案pattern的寬高設置的恰當，則會出現在邊界線的兩側

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=10 height=10  patternUnits="userSpaceOnUse" >
        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />
      </pattern>
  </defs>
  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="url(#pattern1)" stroke-width="10"/>
</svg>

使用圖片

　　上次所有的實例中，都是使用SVG圖形來創建圖案。下面將使用一個圖像作為SVG圖案，該圖像寬為50px，高為50px，是兩個綠色的正方形組成的棋盤圖案

　　這里使用了一個<image>元素，然后通過xlink:href屬性引用圖像

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=0.2 height=0.2  >
        <image xlink:href="http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/wpid-pattern-50.png" width=10 height=10></image>
      </pattern>
  </defs>
  <rect id="rect1" x="0" y="0" width="50" height="50" fill="url(#pattern1)" />
</svg>

圖案引用

　　使用xlink:href屬性，可以在SVG文檔中引用另一個圖案

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=0.2 height=0.2>
        <image xlink:href="http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/wpid-pattern-50.png" width=10 height=10></image>
      </pattern>
      <pattern id="pattern2" xlink:href="#pattern1" x=0.1>
      </pattern>      
  </defs>
  <rect id="rect1" x="0" y="0" width="50" height="50" fill="url(#pattern2)" />
</svg>

　　可以通過在一個圖案中的圖形中引用另一個圖案來實現圖案嵌套的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
      <pattern id="pattern1" width=0.2 height=0.2>
        <image xlink:href="http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/wpid-pattern-50.png" width=2.5 height=2.5></image>
      </pattern>
      <pattern id="pattern2" width=0.2 height=0.2>
        <circle cx=5 cy=5 r=5 fill="url(#pattern1)"></circle>
      </pattern>      
  </defs>
  <rect id="rect1" x="0" y="0" width="50" height="50" fill="url(#pattern2)" />
</svg>