Extra Properties

Next ❯Filter Introduction

Extra useful properties

  • turned_in_notExtra Properties
    • cursor
    • color
    • outline
    • fill-rule
    • clip-rule
    • paint-order
    • shape-rendering
    • vector-effect


cursor

Used to set your cursor type when user mouseOver on any SVG component

Syntax

cursor:specificCursorType


color

Used to set the default color that can be inherited by any color related properties if needed then set its value as "currentColor"

Syntax

color:color
<svg height="100" width="200">
  <g style="color:blue">
    <circle cx="100" cy="50" r="30" 
      style="stroke:currentColor;stroke-width:5;fill:yellow"/>
 </g>
</svg>
color


outline

Used to visualize the area covered by an SVG component

Syntax

outline:none|(width solid|dotted|double|dashed|groove|ridge|inset|outset color)
<svg height="100" width="200">
  <circle cx="100" cy="50" r="30" 
      style="stroke:aqua;stroke-width:5;outline:5px dotted red"/>
</svg>
outline


fill-rule

Used to determine whether the inside drawn shape part of a shape should be filled or not

  • It depends on the direction of internal and external shape of a path, and the internal shape made by intersection points
  • Used in path related tags

Syntax

fill-rule:nonzero|evenodd
  • label_outlineMore Details

    * nonzero depends on direction and intersection point where as evenodd is not
<svg height="100" width="200">
  <path d="M40 20 L40 80 L160 80 L160 20 Z
           L60 40 L140 40 L160 20"
        style="fill-rule:evenodd;stroke:aqua;stroke-width:5;"/>
</svg>
fill-rule


clip-rule

Similar to fill-rule, but used only with path related elements used under <clipPath>

Syntax

clip-rule:nonzero|evenodd
<svg height="100" width="200">
  <defs>
    <!--Define a clipPath -->
    <clipPath id="svgclip">
      <path d="M60 20 h80 v60 h-80 Z
               M80 35 h40 v30 h-40 Z"
        style="clip-rule:evenodd;"/>
    </clipPath>
  </defs>
  <!--Attach a defined clipPath -->
  <image href="images/halloween.png" width="200" height="100"
  style="clip-path:url(#svgclip)"/>
  
  <!--Your real path used for clipping, Just un-comment to see--> 
  <!--path d="M60 20 h80 v60 h-80 Z M80 35 h40 v30 h-40 Z" style="fill-rule:evenodd;"/-->
</svg>
clip-rule


paint-order

Used to set the painting order of the fill, stroke and markers of a given shape or text element, default is 'normal' (which is in order, first fill then above stroke then above markers)

Syntax

paint-order:normal|(fill|stroke|markers fill|stroke|markers fill|stroke|markers)
  • label_outlineMore Details
    normalstroke markers fill

    * MouseOver on black box above to see their values

<svg height="100" width="200">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="5" markerHeight="5" orient="auto">
      <path d="M0 0 L10 5 L0 10 L3 5 z" fill="red" fill-opacity="0.8" />
    </marker>
  </defs>
  
  <polyline points="50 20, 50 80, 150 80, 150 20"
   style="paint-order:markers stroke fill;
          stroke:aqua;stroke-width:5;marker:url(#arrow)"/>
</svg>
paint-order


shape-rendering

Used to o set how to render any shape, default value is 'auto'

Syntax

shape-rendering:auto|crispEdges|optimizeSpeed|geometricPrecision
<svg height="100" width="200">
  <circle cx="25" cy="50" r="20" style="shape-rendering:auto"/>
  <circle cx="75" cy="50" r="20" style="shape-rendering:crispEdges"/>
  <circle cx="125" cy="50" r="20" style="shape-rendering:optimizeSpeed"/>
  <circle cx="175" cy="50" r="20" style="shape-rendering:geometricPrecision"/>
</svg>
shape-rendering


vector-effect

Used to stop the transformation effect on stroke, of a shape or a text, default value is 'default'

Syntax

vector-effect:default|non-scaling-stroke
* Check the stroke, on your left the stroke is not affected by the transformation
<svg height="100" width="200">
  <polyline points="20 20, 20 80, 120 80, 120 40" 
    transform="scale(0.5,1)" vector-effect="non-scaling-stroke"
    stroke="#ff1493" stroke-width="10"/>

  <polyline points="20 20, 20 80, 120 80, 120 40" 
    transform="translate(120,0) scale(0.5,1)" 
    stroke="#ff1493" stroke-width="10"/>
</svg>
vector-effect


  • Filter Introduction
❮ Prev Extra Tags
Next ❯Filter Introduction
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯