pelicin › web › SVG

Pattern

You can apply patterns as fills or strokes.

Use the <pattern> element to create a pattern.

You would declare patterns inside the <defs> element, and you must give the gradient an id attribute so you can reference it.

SVG elements

<pattern>

Pattern tile
  • width — width of the pattern tile
  • height — height of the pattern tile
  • x — x coordinate offset of the pattern tile
  • y — y coordinate offset of the pattern tile
Units
  • patternUnits — defines the coordinate system for attributes x, y, width, height; specify userSpaceOnUse (use viewport/absolute coordinate) or objectBoundingBox (use the bounding box of the element that references this pattern, coordinate values will range from 0 to 1)
  • patternContentUnits — defines the coordinate system for children elements of <pattern>; specify userSpaceOnUse (use viewport/absolute coordinate) or objectBoundingBox (use the bounding box of the element that references this pattern, coordinate values will range from 0 to 1)
View box
  • viewBox — the position and dimension of the viewbox of the pattern, e.g. 0 0 100 100 (if the viewbox's aspect ratio does not match the pattern's width and height, parts outside the viewbox will be visible in the pattern tile)
  • preserveAspectRatio — how to fit the viewBox if the viewbox's aspect ratio does not match the pattern's width and height, e.g. none (stretch) or xMidYMid (preserve aspect ratio and align at center)
Others
  • href — reference to another <pattern> that will be used as a template
  • patternTransform — space-separated CSS transform functions, e.g. skewX(20) translate(-35, 0)
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <defs>
    <!-- Gradient definition -->
    <linearGradient id="Gradient1">
      <stop offset="5%" stop-color="white" />
      <stop offset="95%" stop-color="blue" />
    </linearGradient>
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="red" />
      <stop offset="95%" stop-color="orange" />
    </linearGradient>
    <!-- Pattern definition -->
    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
      <rect x="0" y="0" width="50" height="50" fill="skyblue" />
      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5" />
    </pattern>
  </defs>
  <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
</svg>
| LIVE PREVIEW

References