Drawings in SVG format. Part 4 - Draft Standard

Submitted by admin on

In "Drawings in SVG format. Part 3 - Draft Standard" an example of hatching areas and hatching patterns examples different materials from a CAD systems. In the continuation we consider the drawing dimensions.

Drawing a dimensions.

All the elements of dimensions we combine the 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>

To draw the arrows and dots using the tagmarker and create their templates:

<!-- Drawing a arrows and marks hairstroke - DimPoint -->
    <!-- left arrow (the arrow inside) -->
    <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>
    <!-- right arrow (the arrow on the outside) -->
    <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>
    <!-- mark hairstroke -->
    <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>
    <!-- auxiliary point -->
    <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>
    <!-- closed left arrow -->
    <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>
    <!-- closed right arrow -->
    <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>
    <!-- left open arrow -->
    <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>
    <!-- right open arrow  -->
    <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>
    <!-- left arrow is 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>
    <!-- right arrow is 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>
    <!-- point -->
    <marker id="DimPoint11" viewBox="-10 -10 20 20" markerWidth="20" markerHeight="20">
        <circle stroke="black" cx="0" cy="0" r="8"/>
    </marker>
    <!-- a small point -->
    <marker id="DimPoint12" viewBox="-10 -10 20 20" markerWidth="20" markerHeight="20">
        <circle stroke="black" cx="0" cy="0" r="5"/>
    </marker>


In the above example, dimensions the arrow inside, drawing on the outside we change the values ​​of the properties marker-start and marker-end among themselves.

<line class="lt2" x1="585" y1="0" x2="585" y2="325" marker-start="url(#DimPoint2)" marker-end="url(#DimPoint1)"/>

The first method is necessary for each scale to create a pattern of arrows.
The second version of the code dimensions is as follows:

<!-- Drawing a arrows and marks hairstroke - DimPoint -->
<!-- Variant 2 -->
<!-- left arrow (the arrow inside) -->
<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>
<!-- right arrow (the arrow on the outside) -->
<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 is different from the first embodiment property value changes markerWidth и markerHeight. The value chosen for their drawing to scale 1:1.
The second variant of the 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>

Property values stroke-width given by the rule of drawing point (a marker).
See the article Drawings in SVG format. Part 2 - Draft Standard

Example of a diametric dimension with an extended 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>&#x2205;</tspan>220</text> 
</g>

Text.
In browsers now not all features are implemented to format the text. Text derive tag text. Also use the insert tag tspan for text fragments with their properties (see previous code sample).
Property value font-size 28 conventional units is the size of the font on the drawing 5mm view scale 1:4.

Demo of the drawing to an external file CSS

In the next section we consider the use of JavaScript.

Tags: