在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ SVG <pattern>元素
SVG鏈接
SVG陰影效果
SVG線性漸變
SVG文本
SVG平面陰影
SVG圖表
SVG交互
SVG時(shí)鐘
SVG漸變
SVG <pattern>元素
SVG簡(jiǎn)介
SVG徑向漸變
SVG <filter>元素
SVG對(duì)話(huà)框效果
SVG形狀
SVG stroke屬性
SVG圖形
SVG教程
SVG事件監(jiān)聽(tīng)器
SVG加載器示例
SVG腳本(JavaScript)
SVG圖標(biāo)
SVG拖動(dòng)
SVG模糊效果

SVG <pattern>元素

SVG使用<pattern>元素來(lái)定義模式。 模式使用<pattern>元素定義，并用于以平鋪方式填充圖形元素。

聲明

以下是<pattern>元素的語(yǔ)法聲明。 我們只顯示一些主要屬性。

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"

   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     

   width="length"
   height="length"

   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

屬性

編號(hào) 名稱(chēng) 描述
1 patternUnits 用來(lái)定義圖案效果區(qū)域的單位。 它為模式內(nèi)的各種長(zhǎng)度值以及定義模式子區(qū)域的屬性指定坐標(biāo)系。 如果patternUnits =“userSpaceOnUse”，則值表示使用'pattern'元素時(shí)當(dāng)前用戶(hù)坐標(biāo)系中的值。 如果patternUnits =“objectBoundingBox”，則值表示在使用'pattern'元素時(shí)就地引用元素上的邊界框的分?jǐn)?shù)或百分比的值。 默認(rèn)是userSpaceOnUse。
2 patternContentUnits 用來(lái)定義模式內(nèi)容區(qū)域的單位。 它為模式內(nèi)的各種長(zhǎng)度值以及定義模式子區(qū)域的屬性指定坐標(biāo)系。 如果patternContentUnits =“userSpaceOnUse”，則值表示使用'pattern'元素時(shí)當(dāng)前用戶(hù)坐標(biāo)系中的值。 如果patternContentUnits =“objectBoundingBox”，則值表示在使用'pattern'元素時(shí)就地引用元素上的邊界框的分?jǐn)?shù)或百分比值。 默認(rèn)是userSpaceOnUse。
3 x 模式邊界框的x軸坐標(biāo)。 缺省值是0。
4 y 模式邊界框的y軸坐標(biāo)。 缺省值是0。
5 width 模式邊界框的寬度。 缺省值是0。
6 height 圖案邊界框的高度。 默認(rèn)是0。
7 preserveAspectRatio 以保留原始內(nèi)容的寬高比。
8 xlink:href 用于指另一種模式。

示例

文件:testSVG.html - 

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>

      <svg width="800" height="800">

         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>

         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 

      </svg>

   </body>
</html>

以下是上面代碼的說(shuō)明 -

  • 有一個(gè)<pattern>元素定義為pattern1。
  • 在模式中，定義了一個(gè)視框，并定義了一個(gè)將被用作模式的路徑。
  • 在rect元素中，在填充屬性中，指定了模式的url，以使用之前創(chuàng)建的模式填充矩形。

在Chrome瀏覽器中打開(kāi)文件:textSVG.html ，得到以下結(jié)果 -


上一篇：SVG圖標(biāo)下一篇：SVG陰影效果