Drawings in SVG format. Part 3. - Draft Standard
In " Drawings in SVG format. Part 2 - Standard draft " gives an example of drawing simple graphic objects from CAD systems. In the sequel, consider drawing hatching for different materials.
Hatching.
Draw the hatch pattern in defs of the drawing using the pattern tag.
Metal hatch pattern (type 0) at a 45 ° angle
Many will notice and ask the question: - Why are two lines drawn instead of one with the coordinates x1 = "0" y1 = "20" x2 = "20" y2 = "0" ?
Single line hatching example in pattern
if you look closely you will see gaps in the lines of hatching.
An example of hatching with two lines in a pattern
with two lines there are no such discontinuities.
Code fragment of the area hatched by the type of metal at an angle of 45 °
Metal hatch pattern (type 0) at an angle of 30 °
Examples of hatching other materials
Nonmetal hatch pattern (type 1) at a 45 ° angle
Template for tree hatching (type 2), in this embodiment, for each area of hatching you need to create your own template. While another option has not figured out how to draw the circumference and the envelope of the template more from the shading area. Maybe someone will come up with a better solution.
Template for hatching natural stone (type 3) at an angle of 45 °
Hatch pattern for ceramics (type 4) at an angle of 45 °
Template for hatching concrete (type 5) at an angle of 45 °
Template for shading glass (type 6) at an angle of 45 °
In cases where it is necessary to have a non-hatched area in the shaded area, this solution can be applied.
The area of the circle is superimposed on the shaded area.
Sample drawing with external CSS file
')
Updated version of the article
Hatching.
Draw the hatch pattern in defs of the drawing using the pattern tag.
Metal hatch pattern (type 0) at a 45 ° angle
<pattern id="hatch0_45" width="20" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="1" y1="20" x2="20" y2="1" /> <line class="lt2_025 " x1="0" y1="1" x2="1" y2="0" /> </pattern> Many will notice and ask the question: - Why are two lines drawn instead of one with the coordinates x1 = "0" y1 = "20" x2 = "20" y2 = "0" ?
Single line hatching example in pattern
if you look closely you will see gaps in the lines of hatching.
An example of hatching with two lines in a pattern
with two lines there are no such discontinuities.
Code fragment of the area hatched by the type of metal at an angle of 45 °
<path d="M475,225 L475,325 L500,325 L500,225 Z" fill="url(#hatch1_45)"/> Metal hatch pattern (type 0) at an angle of 30 °
<pattern id="hatch1_30" width="34" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="2" y1="20" x2="34" y2="1" /> <line class="lt2_025 " x1="-1" y1="2" x2="3" y2="-1" /> </pattern> Examples of hatching other materials
Nonmetal hatch pattern (type 1) at a 45 ° angle
<pattern id="hatch2_45" width="34" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="0" y1="20" x2="20" y2="0" /> <line class="lt2_025 " x1="0" y1="0" x2="20" y2="20" /> </pattern> Template for tree hatching (type 2), in this embodiment, for each area of hatching you need to create your own template. While another option has not figured out how to draw the circumference and the envelope of the template more from the shading area. Maybe someone will come up with a better solution.
<pattern id="hatch2_45" width="350" height="350" patternUnits="userSpaceOnUse"> <circle class="lt2_025" cx="0" cy="0" r="180" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="200" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="220" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="240" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="260" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="280" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="300" fill="none"/> <circle class="lt2_025" cx="0" cy="0" r="320" fill="none"/> </pattern> Template for hatching natural stone (type 3) at an angle of 45 °
<pattern id="hatch3_45" width="20" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="0" y1="20" x2="12" y2="8" /> </pattern> Hatch pattern for ceramics (type 4) at an angle of 45 °
<pattern id="hatch4_45" width="20" height="20" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="0" y1="16" x2="16" y2="0" /> <line class="lt2_025 " x1="4" y1="20" x2="20" y2="4" /> <line class="lt2_025 " x1="0" y1="4" x2="4" y2="0" /> <line class="lt2_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="lt2_025 " x1="0" y1="30" x2="6" y2="24" /> <line class="lt2_025 " x1="10" y1="20" x2="26" y2="4" /> </pattern> Template for shading glass (type 6) at an angle of 45 °
<pattern id="hatch5_45" width="30" height="30" patternUnits="userSpaceOnUse"> <line class="lt2_025 " x1="5" y1="15" x2="13" y2="7" /> <line class="lt2_025 " x1="5" y1="25" x2="25" y2="5" /> <line class="lt2_025 " x1="17" y1="23" x2="25" y2="15" /> </pattern> In cases where it is necessary to have a non-hatched area in the shaded area, this solution can be applied.
<path class="lt2" 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="lt2" cx="150" cy="625" r="40"/> <circle cx="150" cy="625" r="40" fill="white"/> The area of the circle is superimposed on the shaded area.
Sample drawing with external CSS file
')
Updated version of the article
Source: https://habr.com/ru/post/185294/
All Articles