HTML | SVG 图案

SVG（可缩放矢量图形）模式是使用 HTML 定义图形中的模式的元素。要使用创建 SVG 图案，您必须在 SVG 内部定义一个 之后，您可以定义该 内部的形状。现在必须通过指定颜色、边框等来定义形状区域。

声明的语法：

属性：

• x：图案边界框的 x 轴坐标。默认为 0
• y：图案边界框的 y 轴坐标。默认值为 0。
• width：图案边界框的宽度。默认值为 0。
• height：图案边界框的高度。默认值为 0。
• viewBox：定义了可以缩放图案的图案框的坐标系。
• 视口：它给出了特定部分的图像。
• patternUnits：它定义了x、y、高度和宽度的坐标系。默认为 ObjectBoundingBox。
• patterncontentUnits：它定义了里面的内容。默认为 userSpaceOnuse。
• patternTransform：它定义了从初始模式系统到目标模式系统的转换。
• 保留AspectRatio：缩放因视框和视口不同而变形或改变的图形。
• xlink:href：链接模式以供参考。

注意：这部分基本上与主题没有直接关系。相反，它向您介绍了这些概念，因为您在阅读一些高级示例时可能会遇到它们。由于它们增加了图案的视觉效果，这就是它们被称为使用的原因。

下面的示例说明了 HTML SVG 模式：

示例 1：这里我们将使用 SVG 图案设计徽标。

输出：

示例 2：

  
    
  
  
     
      
GeeksfoGeeks
    
    
  

输出：

示例3：您可以定义在SVG路径定义百代疗法是要知道路径界定线，有序阵列的运动几件事情，
以下命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto 
C = curveto 
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto

  

    
GeeksforGeeks
    
Sample SVG Pattern
    
  

输出：

支持的浏览器： HTML SVG Pattern支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 苹果浏览器
• 歌剧