SVG Pattern use (patternUnits, patternContentUnits)

A list,

• is a pattern filling tag in SVG that allows you to define patterns in pattern and then fill a pattern with an ID reference

• The width/height attribute of defaults to the percentage of the filled figure.

Second, properties,

• The other two attributes of the pattern tag are:

  • PatternUnits: Default is objectBoundingBox

  • PatternContentUnits: Default is userSpaceOnUse

    Generally used to set the unit size of a pattern within a pattern, such as circle and polygon in the following examples.

• Value range of Units:

  • UserSpaceOnUse:

    X, y, width, and height represent values from the current user coordinate system. In other words, these values are not scaled, they are absolute values.

  • ObjectBoundingBox (default) :

    The x, y, width, and height values are all percentages of the outer box (the element that wraps pattern).

Three cases,

• Case code

  <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
      <defs>
        <pattern id="p1" x="0" y="0" width="0.2" height="0.2">
          <circle cx="10" cy="10" r="5" fill="red" />
          <polygon points="30 10 60 50 0 60" fill="green" />
        </pattern>
      </defs>
      <rect x="0" y="0" width="300" height="200" fill="url(#p1)" stroke="blue" />
  </svg>
  Copy the code

• Effect of case