Code前端首页关于Code前端联系我们

SVG 教程: 元素定义图案并以平铺方式填充图形元素

terry 2年前 (2023-09-27) 阅读数 66 #数据结构与算法

SVG 使用 元素定义图案。图案使用 元素定义,用于将图形元素填充为平铺。

声明

以下是 元素的语法定义。我们只展示一些最重要的功能。

<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%20to%20another%20pattern" >
</pattern>
XML

属性

编号名称描述
1图案单位定义图案区域单位。它为模式的各种长度值和定义模式子区域的属性定义了坐标系。如果 patternUnits = "userSpaceOnUse" ,则该值表示使用 'pattern' 元素时当前用户坐标系中的值。如果 patternUnits = "objectBoundingBox" ,则该值表示使用 'pattern' 元素时元素边界框的分数或百分比。默认为 userSpaceOnUse
2patternContentUnits 用于定义模式内容区域的单位。它为模式的各种长度值和定义模式子区域的属性定义了坐标系。如果 patternContentUnits = "userSpaceOnUse" ,则该值表示使用 'pattern' 元素时当前用户坐标系中的值。如果 patternContentUnits = "objectBoundingBox" ,则该值表示使用 'pattern' 元素时元素边界框的分数或百分比值。默认为 userSpaceOnUse
3x图案边界框x的轴坐标。默认值为0
4y图案边界框y轴的坐标。默认值为0
5宽度图案边界框的宽度。默认值为0
6高度图案边界框的高度。默认为0
7preserveAspectRatio 以保留原始内容的纵横比。
8xlink:href 用于指代另一个状态。† 元素定义为 pattern1
  • 该图案定义视口和用作图案的路径。在
  • right 元素中,图案 url 的 fill 属性设置为使用之前创建的图案填充矩形。
  • 在 Chrome 浏览器中打开文件:textSVG.html 并得到以下结果 -

    版权声明

    本文仅代表作者观点,不代表Code前端网立场。
    本文系作者Code前端网发表,如需转载,请注明页面地址。

    热门