Drawings in SVG format. Part 4. - Draft Standard
The " Drawings in SVG format. Part 3 - Standard Draft " gives an example of shading areas and examples of hatching patterns for various materials from CAD systems. In the sequel, consider drawing sizes.
Drawing sizes.
All size elements we merge into a block.
For drawing arrows, serifs and dots, use the tag tag and create their templates:
In the example above, the size arrow is inside, for drawing outside we change the values of the marker-start and marker-end properties between each other.
In the first method it is necessary for each scale to create its own pattern of arrows.
The second variant of the size code looks like this:
The template code differs from the first variant by the changed values of the markerWidth and markerHeight properties . Their value is chosen for drawing on a scale of 1: 1.
The second option code size
The values of the property stroke-width are set by the rules of drawing a point (marker).
See the article Drawings in SVG format. Part 2 - Draft Standard (updated)
Example of the diametral size with the portable shelf
Text.
In browsers, not all features are now implemented for text formatting. Text output text tag. We also use inserts with the tspan tag for text fragments with their own properties (see the previous code example).
The value of the font-size property of 28 conventional units corresponds to a font size in the drawing of 5 mm for a scale of 1: 4.
Sample drawing with external CSS file
')
Updated version of the article
Drawing sizes.
All size elements we merge into a block.
<g class="DimL"> <line class="lt2" x1="310" y1="0" x2="585" y2="0"/> <line class="lt2" x1="500" y1="325" x2="585" y2="325"/> <line class="lt2" x1="585" y1="0" x2="585" y2="325" marker-start="url(#DimPoint1)" marker-end="url(#DimPoint2)"/> <text x="578" y="162" font-size="28" text-anchor="middle" transform="rotate(-90, 578, 162)">325</text> </g> For drawing arrows, serifs and dots, use the tag tag and create their templates:
template code in SVG format
<!-- - DimPoint --> <!-- ( ) --> <marker id="DimPoint1" viewBox="-2 -12 29 24" markerWidth="44" markerHeight="36" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0"/> </marker> <!-- ( ) --> <marker id="DimPoint2" viewBox="-27 -12 29 24" markerWidth="44" markerHeight="36" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0"/> </marker> <!-- --> <marker id="DimPoint3" viewBox="-10 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" stroke-width="2" d="M-6,6 L6,-6"/> <path stroke="black" d="M0,-10 L0,10 M-10,0 L10,0"/> </marker> <!-- --> <marker id="DimPoint4" viewBox="-10 -10 20 20" markerWidth="24" markerHeight="24"> <circle stroke="black" cx="0" cy="0" r="3"/> <path stroke="black" d="M0,-10 L0,10 M-10,0 L10,0"/> </marker> <!-- --> <marker id="DimPoint5" viewBox="0 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L20,-4 20,4 z"/> </marker> <!-- --> <marker id="DimPoint6" viewBox="-20 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L-20,-4 -20,4 z"/> </marker> <!-- --> <marker id="DimPoint7" viewBox="0 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L20,-4 M0,0 20,4"/> </marker> <!-- --> <marker id="DimPoint8" viewBox="-20 -10 20 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L-20,-4 M0,0 -20,4"/> </marker> <!-- 90 --> <marker id="DimPoint9" viewBox="0 -10 10 20" markerWidth="24" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L10,-10 M0,0 10,10"/> </marker> <!-- 90 --> <marker id="DimPoint10" viewBox="-10 -10 10 20" markerWidth="12" markerHeight="24" orient="auto"> <path stroke="black" d="M0,0 L-10,-10 M0,0 -10,10"/> </marker> <!-- --> <marker id="DimPoint11" viewBox="-10 -10 20 20" markerWidth="20" markerHeight="20"> <circle stroke="black" cx="0" cy="0" r="8"/> </marker> <!-- --> <marker id="DimPoint12" viewBox="-10 -10 20 20" markerWidth="20" markerHeight="20"> <circle stroke="black" cx="0" cy="0" r="5"/> </marker> In the example above, the size arrow is inside, for drawing outside we change the values of the marker-start and marker-end properties between each other.
<line class="lt2" x1="585" y1="0" x2="585" y2="325" marker-start="url(#DimPoint2)" marker-end="url(#DimPoint1)"/> In the first method it is necessary for each scale to create its own pattern of arrows.
The second variant of the size code looks like this:
template code in SVG format option 2
<!-- - DimPoint --> <!-- 2 --> <!-- ( ) --> <marker id="DimP1" viewBox="-2 -12 29 24" markerWidth="8" markerHeight="6" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0"/> </marker> <!-- ( ) --> <marker id="DimP2" viewBox="-27 -12 29 24" markerWidth="8" markerHeight="6" orient="auto"> <path class="lt2_025" stroke="black" d="M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0"/> </marker> The template code differs from the first variant by the changed values of the markerWidth and markerHeight properties . Their value is chosen for drawing on a scale of 1: 1.
The second option code size
<g class="DimL"> <line class="lt2" x1="190" y1="180" x2="190" y2="230"/> <line class="lt2" x1="310" y1="180" x2="310" y2="230"/> <line class="lt2" x1="190" y1="230" x2="310" y2="230"/> <path stroke-width="4" d="M190,230L310,230" marker-start="url(#DimP1)" marker-end="url(#DimP2)"/> <text x="265" y="222" font-size="28" text-anchor="middle">120</text> </g> The values of the property stroke-width are set by the rules of drawing a point (marker).
See the article Drawings in SVG format. Part 2 - Draft Standard (updated)
Example of the diametral size with the portable shelf
<g class="DimD"> <line class="lt2" x1="152.51" y1="50.94" x2="347.49" y2="-50.94"/> <path stroke-width="4" d="M152.51,50.94L347.49,-50.94" marker-start="url(#DimP1)" marker-end="url(#DimP2)"/> <path class="lt2" d="M152.51,50.94L0,130.63h-50"/> <text x="-50" y="122" font-size="28"> <tspan>∅</tspan>220</text> </g> Text.
In browsers, not all features are now implemented for text formatting. Text output text tag. We also use inserts with the tspan tag for text fragments with their own properties (see the previous code example).
The value of the font-size property of 28 conventional units corresponds to a font size in the drawing of 5 mm for a scale of 1: 4.
Sample drawing with external CSS file
')
Updated version of the article
Source: https://habr.com/ru/post/185496/
All Articles