SVG Pattern

by Online Tutorials Library July 14, 2022

SVG Patterns

Patterns can be defined using the <pattern> element. It is used to fill graphics elements in tiled fashion.

Example

  <html>     <title>SVG Pattern</title>     <body>        <h1>SVG Pattern</h1>                <svg width=”950″ height=”950″>                      <defs>              <pattern id=”pattern1″ patternUnits=”userSpaceOnUse”                 x=”0″ y=”0″ width=”100″ height=”100″                 viewBox=”0 0 3 4″ >                 <path d=”M 0 0 L 3 0 L 1.5 3 z” fill=”orange” stroke=”green” />              </pattern>            </defs>                      <g>              <text x=”30″ y=”40″ >Triangle using the Pattern </text>              <rect x=”100″ y=”100″ width=”300″ height=”300″ stroke=”orange”               stroke-width=”3″ fill=”url(#pattern1)” />           </g>                    </svg>          </body>  </html>  

Test it Now

Explanation

The id attribute of <pattern> defines a unique name for the pattern.
patternUnits is used to define x, y, width and height attributes.
x and y are the x and y axis coordinates of the pattern bounding box.

Next TopicSVG Clip Path

SVG Pattern

SVG Patterns

Example

Explanation

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like