revision:
is used to stroke an object. It uses one or more pre-defined paths to fill an object.
It repeats the path after a fixed interval in a specified direction to cover the areas to be painted.
Syntax: <hatch x="" y="" pitch="" rotate="" hatchUnits="" hatchContentUnits="" transform="" href="">
attributes: x, y, rotate, transform. href
codes:
<svg viewBox="0 0 400 300">
<defs>
<hatch id="hatch" hatchUnits="userSpaceOnUse" pitch="5" rotate="135">
<hatchpath stroke="#a080ff" stroke-width="4" />
</hatch>
</defs>
<foreignObject x="25" y="2" width="260" height="160" color="Green">
<div>
<br><br>Keep smiling<br><br>
</div>
</foreignObject>
<rect fill="url(#hatch)" stroke="Green" stroke-width="4" x="5%" y="5%" width="30%" height="30%" />
</svg>
lets authors define linear gradients to apply to other SVG elements.
the <linearGradient> element must be nested within a <defs> tag, which is short for "definitions" and contains definition of special elements (such as gradients).
Linear gradients can be defined as horizontal, vertical or angular gradients:1/ horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ; 2/ vertical gradients are created when x1 and x2 are equal and y1 and y2 differ; 3/ angular gradients are created when x1 and x2 differ and y1 and y2 differ
attributes: gradientUnits, gradientTransform, href, spreadMethod, x1, x2, xlink:href, y1, y2
codes:
<svg viewBox="0 0 10 6">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="blue" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="3" r="3" fill="url('#myGradient')" />
</svg>
defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.
the <pattern> is referenced by the "fill" and/or "stroke" attributes on other graphics elements to fill or stroke those elements with the referenced pattern.
attributes: height, patternContentUnits, patternTransform, patternUnits, preserveAspectRatio, viewbox, width, x, xlink:ref, y
codes:
<svg viewBox="0 0 230 100">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>
lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
the <radialGradient> element must be nested within a <defs> tag, which is short for "definitions" and contains definition of special elements (such as gradients).
attributes: cx, cy, fr, fx, fy, gradientUnits, gradientTransform, href, r, spreadMethod, xlink:href
codes:
<svg viewBox="0 0 10 5">
<defs>
<radialGradient id="myGradient_a">
<stop offset="10%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</radialGradient>
</defs>
<!-- using my radial gradient -->
<circle cx="5" cy="3" r="3" fill="url('#myGradient_a')" />
</svg>
defines a single color in multiple places for an SVG input. It defines a palette and allow it to use consistently throughout a document.
attributes: has no specific attribute
codes:
<svg viewBox="0 0 100 50">
<defs>
<solidColor id="color" solid-color="#a080ff" solid-opacity="0.5" />
</defs>
<g>
<rect fill="none" stroke="blue" x="6" y="6" width="25" height="25" />
<rect fill="url(#color)" stroke="black" stroke-width="2" x="1" y="1" width="35" height="35" />
</g>
</svg>