SVG <pattern>

admin發表於2019-01-28
SVG

<pattern>元素可以預定義一個圖案，以固定間隔對指定區域在x軸和y軸上進行填充。

此圖案可以對SVG元素進行填充或者描邊操作，有點類似於CSS中背景圖片的重複填充操作。

要明確一點，<pattern>元素本身並不可見，它用來預定義或者組織圖案，其他元素引用後才會顯示。

應用非常簡單，如果說有難點，主要在座標系相關屬性的應用，可以預先參閱如下兩篇文章：

（1）.SVG viewprot 視窗和畫布一章節。

（2）.SVG 座標系統一章節。

通過fill或者stroke屬性可以引用圖案對指定元素進行填充和描邊，下面僅以填充為例子。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:400px;
  height:240px;
  border:2px solid red;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="20" y="20"
        width="40" height="40"
        patternUnits="userSpaceOnUse">
   
        <circle 
          cx="20" cy="20"
          r="20"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="20" y="20"
      width="200" height="200"
      stroke="green"
      fill="url(#pattern)"/>
  </svg>                         
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/28/003205twaup6pwsx2paksw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面首先對程式碼進行一下簡述，後續再對屬性進行詳細分析：

（1）.再強調一次，<pattern>元素本身並不會顯示，它是用來預定義圖案。

（2）.在<pattern>元素內定義一個圓形圖案，以備以後應用。

（3）.最後矩形元素<rect>通過fill屬性引用圖案，對齊進行填充操作。

特別說明：<pattern>元素可以建立一個獨立的座標系統，內部元素位於此座標系中。

上面程式碼繪製的圓就位於<pattern>建立的座標系統中，然後在此座標系中以（20,20）為中心，20為半徑繪製圓，也就是在<pattern>元素的正中心繪製一個圓形，再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border: 1px solid red;
  width:300px;
  height:240px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="20" y="20"
        width="40" height="40"
        patternUnits="userSpaceOnUse">
  
        <circle 
          cx="0" cy="0"
          r="20"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="20" y="20"
      width="200" height="200"
      stroke="green"
      fill="url(#pattern)"/>
    <circle 
      cx="20" cy="20"
      r="20"
      stroke="none"
      fill-opacity="0.5"
      fill="green" />
  </svg>                         
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/28/003239uhby565qt95ybyla.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼是為了證明<pattern>元素能夠建立一個獨立座標系，其內部元素以此座標系定位。

（1）.具有透明度的綠色的圓是一個輔助圖形，便於觀察。

（2）.<pattern>元素內部圓的圓心座標是（0,0）。

（3）.如果<pattern>元素能夠建立一個獨立的座標系，那麼（0,0）位置就是<pattern>元素的左上角。

（4）.於是就繪製了四分之一圓形，也就是實現上述填充效果。

一.x與y屬性：

<pattern>元素的x與y屬性用於規定圖案第一次填充開始的座標。

當然這個座標是以<pattern>元素所在的座標系為標準，上述程式碼中，四分之一個圓從（20,20）處開始填充。

二.width與height屬性：

這兩個屬性非常簡單，用於設定<pattern>元素的寬度和高度，不再進行演示。

特別說明：設定<pattern>元素的尺寸不會影響其內部元素的尺寸。

三.patternUnits屬性：

patternUnits由pattern和unit兩個單詞合成。

由此可以大致猜測出此屬性用於規定<pattern>元素使用的尺寸單位。

恰如其名，此屬性用於規定<pattern>元素尺寸的參考系。

具有兩個屬性值，分別如下：

1.userSpaceOnUse：

（1）.規定<pattern>使用的參考系為引用<pattern>的元素所在的當前使用者座標系。

（2）.<pattern>元素的x、y、width和height屬性的值都是絕對值。

2.objectBoundingBox（預設值）：

（1）.規定<pattern>使用的參考系為引用<pattern>的元素所生成的包圍盒。

（2）.<pattern>元素的x、y、width和height屬性的值是介於0-1之間的相對值，也可以是百分比形式。

第二個屬性比第一個稍微抽象一點，下面單獨對其進行一下演示，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border: 1px solid red;
  width:300px;
  height:260px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="0.1" y="0.1"
        width="0.2" height="0.2"
        patternUnits="objectBoundingBox">
   
        <circle 
          cx="20" cy="20"
          r="20"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="40" y="40"
      width="200" height="200"
      stroke="green"
      fill="url(#pattern)"/>
   
    <circle 
      cx="40" cy="40"
      r="20"
      stroke="none"
      fill-opacity="0.5"
      fill="green" />
  </svg>                         
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/28/003325cb8hbbqzg800oy0g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.patternUnits屬性值設定為"objectBoundingBox"，可以省略，因為是預設值。

（2）.此時，<pattern>以它包圍盒為參考系，也就是引用它的元素，在這裡是<rect>元素。

（3）.<pattern>元素的x、y、width和height屬性的值都是以<rect>元素生成的盒為參考，值介於0-1之間。

（4）.x="0.1"，那麼它的實際值就是0.1乘以<rect>元素的寬度，也就是0.1*200=20，y也是同樣的道理，實際值也是20，於是圖案第一次填充開始的座標是（20,20）。

（5）.對於width和height屬性也是同樣的道理，它的尺寸以<rect>的尺寸為參考，實際尺寸分別為40。

（6）.所以，圖案的長寬都是40，圖片的起始填充位置距離矩形元素左上側都（20,20）座標處。

四.patternContentUnits屬性：

此屬性功能與patternUnits類似，屬性值完全相同。

patternContentUnits規定<pattern>所包裹內部元素使用的尺寸參考系。

此屬性的預設值是userSpaceOnUse，與patternUnits屬性恰好相反。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border: 1px solid red;
  width:300px;
  height:260px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="0.1" y="0.1"
        width="0.2" height="0.2"
        patternUnits="objectBoundingBox"
        patternContentUnits="objectBoundingBox">
   
        <circle 
          cx="0.1" cy="0.1"
          r="0.1"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="40" y="40"
      width="200" height="200"
      stroke="green"
      fill="url(#pattern)"/>
   
    <circle 
      cx="40" cy="40"
      r="20"
      stroke="none"
      fill-opacity="0.5"
      fill="green" />
  </svg>                         
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/28/003354qge29xgmjgj1evjo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.patternContentUnits值為objectBoundingBox時，<pattern>內部元素尺寸以引用<pattern>的元素的尺寸為參考，例如cr="0.1"，那麼cr的實際值是0.1乘以200。特別說明，只能使用小數，而不能使用百分數。

（2）.patternContentUnits值為userSpaceOnUse時，尺寸參考引用<pattern>的元素，都是絕對值。

（3）.無論patternContentUnits是何值，內部元素定位都是以<pattern>元素為參考。

（4）.<pattern>元素宣告viewbox屬性，那麼patternContentUnits="objectBoundingBox"無效。

五.patternTransform屬性：

利用此屬性可以對圖案進行變換，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border: 1px solid red;
  width:800px;
  height:650px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="0" y="0"
        width="0.2" height="0.2"
        patternTransform="rotate(10)"
        patternUnits="objectBoundingBox">
  
        <circle 
          cx="40" cy="40"
          r="40"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="33" y="33"
      width="400" height="400"
      stroke="green"
      fill="url(#pattern)"/>
  </svg>                         
</body>
</html>

屬性值可以是一個變換列表，變換之間用空格分隔，程式碼片段如下：

[XML] 純文字檢視 複製程式碼
<pattern 
    id="p1" 
    width=".25" height=".25"
    patternTransform="rotate(20)
                       skewX(30)
                       scale(1 0.5)">
    <circle 
      cx="10" cy="10" 
      r="10" />
  </pattern>

關於變換可以參閱本版塊其他相關文章，本文不多介紹。

相關文章