Drawings in SVG format. Part 3 - Draft Standard

Submitted by admin on

In "Drawings in SVG format. Part 2 - Draft Standard" an example of drawing simple graphics from CAD systems. In the continuation we consider drawing hatching for different materials.

Hatching.
Hatch pattern to draw the defs of the drawing using the tag pattern.
Template for hatching metal (type 0) at an angle of 45 °

<pattern id="hatch0_45" width="20" height="20" patternUnits="userSpaceOnUse">
    <line class="line-type-2_025 " x1="1" y1="20" x2="20" y2="1" />
    <line class="line-type-2_025 " x1="0" y1="1" x2="1" y2="0" />
</pattern>

Many people will notice and will ask the question - Why is drawn two lines instead of one with the coordinates x1="0" y1="20" x2="20" y2="0"?
Example of hatching with one line in the pattern

if you look closely you'll see the line breaks in hatching.
Example of hatch pattern in two lines

these two lines with no discontinuities.

Code fragment of the hatched type of metal at an angle of 45 °

<path d="M475,225 L475,325 L500,325 L500,225 Z" fill="url(#hatch0_45)"/>

Template for hatching metal (type 0) at an angle of 30 °

<pattern id="hatch0_30" width="34" height="20" patternUnits="userSpaceOnUse">
    <line class="line-type-2_025 " x1="2" y1="20" x2="34" y2="1" />
    <line class="line-type-2_025 " x1="-1" y1="2" x2="3" y2="-1" />
</pattern>

Examples of hatching other materials

Template for hatching nonmetal (type 1) at an angle of 45 °

<pattern id="hatch1_45" width="34" height="20" patternUnits="userSpaceOnUse">
    <line class="line-type-2_025 " x1="0" y1="20" x2="20" y2="0" />
    <line class="line-type-2_025 " x1="0" y1="0" x2="20" y2="20" />
</pattern>

Template for hatching the wood (type 2), in such an embodiment, each of the hatch to create your template. While other options are not figured out how to draw a circle and envelope template zashtrihovyvaniya more from the field. Maybe someone will come up with a successful solution.

<pattern id="hatch2_45" width="350" height="350" patternUnits="userSpaceOnUse">
    <circle class="line-type-2_025" cx="0" cy="0" r="180" fill="none"/>
    <circle class="line-type-2_025" cx="0" cy="0" r="200" fill="none"/>
    <circle class="line-type-2_025" cx="0" cy="0" r="220" fill="none"/>
    <circle class="line-type-2_025" cx="0" cy="0" r="240" fill="none"/>
    <circle class="line-type-2_025" cx="0" cy="0" r="260" fill="none"/>
    <circle class="line-type-2_025" cx="0" cy="0" r="280" fill="none"/>
    <circle class="line-type-2_025" cx="0" cy="0" r="300" fill="none"/>
    <circle class="line-type-2_025" cx="0" cy="0" r="320" fill="none"/>    
</pattern>

Template for hatching of natural stones (type 3) at an angle of 45 °

<pattern id="hatch3_45" width="20" height="20" patternUnits="userSpaceOnUse">
    <line class="line-type-2_025 " x1="0" y1="20" x2="12" y2="8" />
</pattern>

Template for hatching ceramics (type 4) at an angle of 45 °

<pattern id="hatch4_45" width="20" height="20" patternUnits="userSpaceOnUse">
    <line class="line-type-2_025 " x1="0" y1="16" x2="16" y2="0" />
    <line class="line-type-2_025 " x1="4" y1="20" x2="20" y2="4" />
    <line class="line-type-2_025 " x1="0" y1="4" x2="4" y2="0" />
    <line class="line-type-2_025 " x1="16" y1="20" x2="20" y2="16" />
</pattern>

Template for hatching concrete (type 5) at an angle of 45 °

<pattern id="hatch5_45" width="20" height="20" patternUnits="userSpaceOnUse">
    <line class="line-type-2_025 " x1="0" y1="30" x2="6" y2="24" />
    <line class="line-type-2_025 " x1="10" y1="20" x2="26" y2="4" />
</pattern>

Template hatch glass (type 6) at an angle of 45 °

<pattern id="hatch5_45" width="30" height="30" patternUnits="userSpaceOnUse">
    <line class="line-type-2_025 " x1="5" y1="15" x2="13" y2="7" />
    <line class="line-type-2_025 " x1="5" y1="25" x2="25" y2="5" />
    <line class="line-type-2_025 " x1="17" y1="23" x2="25" y2="15" />
</pattern>

In cases when it is necessary to have not hatched region, the decision can be applied.

<path class="line-type-2" d="M0,575L0,600 15,675 100,650 250,675 300,575z"/>
<path d="M0,575L0,600 15,675 100,650 250,675 300,575z" fill="url(#hatch0_45)"/>
<circle class="line-type-2" cx="150" cy="625" r="40"/>
<circle cx="150" cy="625" r="40" fill="white"/>

The area of the circle is superimposed on the hatched region.

Demo of the drawing

Tags: