Pattern

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

• turned_in_notPattern Related Tag
  • <pattern>

<pattern>

Used to define a pattern using svg components

Full-Syntax

library_books<pattern id="anyId" 
         x="number|%" y="number|%"
         width="number|%" height="number|%"
         patternUnits="objectBoundingBox|userSpaceOnUse"
         patternContentUnits="userSpaceOnUse|objectBoundingBox"
         patternTransform="anySvgTransformationMethods"
         preserveAspectRatio="none|(xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax  meet|slice)"
         viewBox="minX minY width height"
         href="anotherPatternId">
    <!--Draw a pattern shape with SVG elements here-->
</pattern>

• 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

library_books<svg height="100" width="200">
  <defs>
    <pattern id="dots" viewBox="0,0,10,10" width="15%" height="15%">
      <circle cx="5"  cy="5" r="4" fill="red"/>
    </pattern>
  </defs>
  <circle cx="100" cy="50" r="40" fill="url(#dots)"/>
</svg>