📌  相关文章
📜  SVG-模式

📅  最后修改于: 2020-10-19 02:50:27             🧑  作者: Mango

SVG使用元素定义模式。模式是使用元素定义的，用于以平铺方式填充图形元素。

宣言

以下是元素的语法声明。我们仅显示了主要属性。

属性

Sr.No. Name & Description
1 patternUnits − units to define patterns effect region. It specifies the coordinate system for the various length values within the pattern and for the attributes defining the pattern subregion. If patternUnits=”userSpaceOnUse”, values represent values in the current user coordinate system in place at the time when the ‘pattern’ element is used. If patternUnits=”objectBoundingBox”, values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the ‘pattern’ element is used. Default is userSpaceOnUse.
2 patternContentUnits − units to define pattern content region. It specifies the coordinate system for the various length values within the pattern and for the attributes defining the pattern subregion. If patternContentUnits=”userSpaceOnUse”, values represent values in the current user coordinate system in place at the time when the ‘pattern’ element is used. If patternContentUnits=”objectBoundingBox”, values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the ‘pattern’ element is used. Default is userSpaceOnUse.
3 x − x-axis co-ordinate of the pattern bounding box. Defeault is 0.
4 y − y-axis co-ordinate of the pattern bounding box. Default is 0.
5 width − width of the pattern bounding box. Default is 0.
6 height − height of the pattern bounding box. Default is 0.
7 preserveAspectRatio – to preserve width/height ratio of original content.
8 xlink:href − used to refer to another pattern.

例

testSVG.htm

SVG Pattern
   
      
Sample SVG Pattern

      
      
         
         
            
               
             
         
         
         
            Using Pattern (Triangles):

  • 一个元素定义为pattern1。

  • 在模式中，定义了一个视图框，并定义了要用作模式的路径。

  • 在rect元素的fill属性中，指定图案的url，以使用先前创建的图案填充矩形。

输出

在Chrome网络浏览器中打开textSVG.htm。您可以使用Chrome / Firefox / Opera直接查看SVG图像，而无需任何插件。 Internet Explorer 9和更高版本还支持SVG图像呈现。