Next ❯Marker

To fill pattern in svg shape related components using fill or stroke as required

  • turned_in_notPattern Related Tag
    • <pattern>


Used to define a pattern using svg components


<pattern id="anyId" 
         x="number|%" y="number|%"
         width="number|%" height="number|%"
         preserveAspectRatio="none|(xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax  meet|slice)"
         viewBox="minX minY width height"
    <!--Draw a pattern shape with SVG elements here-->
  • label_outlinepattern Attributes
    • id - To reference the pattern
    • x, y - The start position of pattern along xy-axis (Default: 0)
    • width, height - The width and height of the pattern (Default: 0)
    • patternUnits - Defines the coordinate system for its attributes x, y, width, height (Default: "objectBoundingBox")
    • patternContentUnits - Defines the coordinate system for the contents of the pattern, only work if a viewBox attribute is not specified (Default: "userSpaceOnUse")
    • patternTransform - To transform the pattern, see Transformation
    • preserveAspectRatio - Specify how an element with different aspect ratio provided by viewBox must fit into a viewport (Default: "xMidYMid meet")
    • viewBox - Specify which portion of your coordinates are visible within the specified width and height (Default: "none")
    • href - Reference of another pattern to use their attributes values (uses the one which is not declared in current pattern)

    * Useful to maintain the ratio if resized
    userSpaceOnUse - Use the normal full-coordinate system, can use "%" or "point" values
    objectBoundingBox - Use the full-width and full-height for the full-coordinate system
       For __ContentUnits, better use "float" (0-1) values for its content attributes
       For __Units, can use "%" (0-100) or "float" (0-1) values
<svg height="100" width="200">
    <pattern id="dots" viewBox="0,0,10,10" width="15%" height="15%">
      <circle cx="5"  cy="5" r="4" fill="red"/>
  <circle cx="100" cy="50" r="40" fill="url(#dots)"/>

  • Marker
❮ Prev Gradient
Next ❯Marker
TryOut Examples"Learn to Explore..!"

TryOut Editor