image/svg+xml
Simple hatches
Since hatchUnits="userSpaceOnUse" is usedthe rendering will match when hatched shapeis moved to the point 0,0
<hatch id="simple1" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" stroke-width="2"/></hatch>
<hatch id="simple2" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="15"/></hatch>
<hatch id="simple3" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" d="M 0,0 5,10"/></hatch>
<hatch id="simple4" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" d="L 0,0 5,10"/></hatch>
<hatch id="simple5" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" d="M 0,0 5,10 10,5"/></hatch>
<hatch id="simple6" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" d="m 0,0 5,10 5,-5"/></hatch>
<hatch id="simple7" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" d="M 0,0 5,10 M 5,20"/></hatch>
<hatch id="transform1" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" d="L 0,0 5,10 0,20"/></hatch>
<hatch id="transform2" hatchUnits="userSpaceOnUse" pitch="15" rotate="30"> <hatchPath stroke="#a080ff" offset="10" d="L 0,0 5,10 0,20"/></hatch>
<hatch id="transform4" hatchUnits="userSpaceOnUse" pitch="15" rotate="45"> <hatchPath stroke="#a080ff" offset="10" d="L 0,0 5,10 0,20"/></hatch>
<hatch id="transform7" hatchUnits="userSpaceOnUse" pitch="15" x="-5" y="-10"> <hatchPath stroke="#a080ff" offset="10" d="L 0,0 5,10 0,20"/></hatch>
<hatch id="transform8" hatchUnits="userSpaceOnUse" pitch="15" x="-5" y="-10" rotate="30"> <hatchPath stroke="#a080ff" offset="10" d="L 0,0 5,10 0,20"/></hatch>
<hatch id="transform9" hatchUnits="userSpaceOnUse" pitch="15" rotate="30" x="-5" y="-10" hatchTransform="matrix(0.96592583,-0.25881905,0.25881905,0.96592583,-8.4757068,43.273395)"> <hatchPath stroke="#a080ff" offset="10" d="L 0,0 5,10 0,20"/></hatch>
<hatch id="multiple1" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5"/> <hatchPath stroke="#32ff3f" offset="10"/></hatch>
<hatch id="multiple2" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5"/> <hatchPath stroke="#a080ff" offset="10" d="L 0,0 5,10"/></hatch>
<hatch id="multiple3" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" d="L 0,0 5,17" /> <hatchPath stroke="#a080ff" offset="10" d="L 0,0 5,10"/></hatch>
<hatch id="ref1" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5"/></hatch>
<hatch id="ref2" xlink:href="#ref1"></hatch>
<hatch id="ref3" xlink:href="#ref1" pitch="45"></hatch>
<hatch id="stroke1" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" stroke-width="5" stroke-dasharray="10 4 2 4"/></hatch>
<hatch id="overflow1" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="5" d="L 0,0 5,5 -5,15, 0,20"/></hatch>
<hatch id="overflow2" style="overflow:hidden" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="0" d="L 0,0 5,5 -5,15, 0,20"/></hatch>
<hatch id="overflow3" style="overflow:visible" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#a080ff" offset="0" d="L 0,0 5,5 -5,15, 0,20"/></hatch>
<hatch id="overflow4" style="overflow:visible" hatchUnits="userSpaceOnUse" pitch="15"> <hatchPath stroke="#32ff3f" offset="5" > <hatchPath stroke="#ff0000" offset="20" ></hatch>
<hatch id="degenerate1" pitch="45"></hatch>
<hatch id="degenerate2" xlink:href="#nonexisting" pitch="45"></hatch>
<hatch id="degenerate3" pitch="30"> <hatchPath stroke="#a080ff" offset="10" d="L 0,0 5,10 0,15"/></hatch>
<hatch id="degenerate4" pitch="30"> <hatchPath stroke="#a080ff" offset="10" d="L 0,0 5,10 -5,15"/></hatch>
Hatch transforms
Multiple hatch paths
Hatch linking
Stroke style
Overflow property
Degenerate cases