Drawings in SVG format. Part 2. - Draft Standard
In " Drawings in SVG format. Part 1 - Standard Draft (updated) " provides an example of the drawing object model, setting the scale and line styles. In the sequel, consider drawing simple graphic objects from CAD systems.
Simple graphic objects.
The following simple graphic objects are used in CAD systems:
Point (marker)
Line
Circle
Ellipse
Arc and Arc of Ellipse
Rectangle
Broken line
NURBS Curve (Spline) -
Drawing demo
Updated version of the article
Drawings in SVG format. Part 3 - Draft Standard
Simple graphic objects.
The following simple graphic objects are used in CAD systems:
Point (marker)
code in SVG format
We draw the template and point display styles in the defs part of the drawing.
Print the point in the drawing with the path tag. In the property stroke-width we set the inverse scale of the view, if the scale of the view is 1: 4, then for the point we specify the scale 4: 1.
<marker id="Point0" viewBox="-10 -10 20 20" markerWidth="5" markerHeight="5"> <path d="M-3,0 L0,-3 3,0 0,3 z" stroke="red" fill="none"/> </marker> Print the point in the drawing with the path tag. In the property stroke-width we set the inverse scale of the view, if the scale of the view is 1: 4, then for the point we specify the scale 4: 1.
<path stroke-width="4" d="M50,35" marker-end="url(#Point0)"/> Line
code in SVG format
In the CSS file we describe the types of lines.
And in the drawing we use the line tag with assigning it a line type class.
The line tag has a vector-effect property set to non-scaling-stroke . At any given scale, the lines will be drawn with the same thickness for the view.
line, rect, circle, ellipse, path, text { vector-effect: non-scaling-stroke; } /* */ .lt1 { fill: none; stroke: blue; stroke-width: 2; } /* */ .lt2 { fill: none; stroke: black; stroke-width: .7; } /* */ .lt3 { fill: none; stroke: red; stroke-width: .7; stroke-dasharray: 25, 4, 3, 4; } /* */ .lt4 { fill: none; stroke: black; stroke-width: .7; stroke-dasharray: 7, 4; } ... And in the drawing we use the line tag with assigning it a line type class.
<line class="lt1" x1="0" y1="0" x2="500" y2="0"/> The line tag has a vector-effect property set to non-scaling-stroke . At any given scale, the lines will be drawn with the same thickness for the view.
Circle
code in SVG format
Line types are used as for the line tag from the CSS file.
And in the drawing we use the circle tag with the assignment of a line type to it.
And in the drawing we use the circle tag with the assignment of a line type to it.
<circle class="lt1" cx="165" cy="25" r="125"/> Ellipse
code in SVG format
Line types are used as for the line tag from the CSS file.
And in the drawing we use the ellipse tag with assignment to it a class of the line type.
And in the drawing we use the ellipse tag with assignment to it a class of the line type.
<ellipse class="lt3" cx="120" cy="280" rx="100" ry="50"/> Arc and Arc of Ellipse
code in SVG format
Line types are used as for the line tag from the CSS file.
And in the drawing we use the path tag with assigning it a line type class. In the property d we set the parameters of the arc.
And in the drawing we use the path tag with assigning it a line type class. In the property d we set the parameters of the arc.
<path class="lt2" d="M50,50 A140,140 0 0 1 200,350"/> <path class="lt3" d="M20,150 A20,40 0 0 1 130,50"/> Rectangle
code in SVG format
Line types are used as for the line tag from the CSS file.
In the drawing, we use the rect tag with assigning it a line type class.
In the drawing, we use the rect tag with assigning it a line type class.
<rect class="lt1" x="20" y="5" width="395" height="287"/> Broken line
code in SVG format
Line types are used as for the line tag from the CSS file.
In the drawing, we use the rect tag with assigning it a line type class.
In the drawing, we use the rect tag with assigning it a line type class.
<polyline class="lt7" points="20,250 50,250 60,300 80,120 120,140 200,180"/> NURBS Curve (Spline) -
code in SVG format
Line types are used as for the line tag from the CSS file.
And in the drawing we use the path tag with assigning it a line type class.
And in the drawing we use the path tag with assigning it a line type class.
<path class="lt2" d="M140,201.34 C144.696,186.7859 152.303,175.3664 162.822,167.0820 C167.996,163.0066 174.363,158.9944 180.459,157.132 C194.3626,152.8843 213.0561,157.132 225.5589,167.082 C232.5067,172.6114 241.8569,177.1221 250,177.9937 C263.3438,179.4220 275.9399,163.2633 290.0,160 C299.5142,157.7918 310.4253,154.6301 319.5409,157.132 C325.7604,158.8390 332.0035,163.0066 337.1780,167.082 C347.6966,175.3664 353.3294,189.206 360,201.3405"/> Drawing demo
Updated version of the article
Drawings in SVG format. Part 3 - Draft Standard
')
Source: https://habr.com/ru/post/185268/
All Articles