Submitted by admin on
In "Drawings in SVG format. Part 1 - Draft Standard" is an example of the object model of the drawing, reference scale and line styles. In the sequel we consider drawing simple graphics from CAD systems.
Simple graphics.
In CAD systems use the following simple graphic objects:
The point (marker)
Template and the styles we draw a point in defs of the figure.
<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>
We derive a point in the drawing with the tag path. In the property stroke-width ask the inverse scale view if the view scale 1:4, then the dot indicates the scale of 4:1.
<path stroke-width="4" d="M50,35" marker-end="url(#Point0)"/>
Line
In the CSS file describes the types of lines.
line, rect, circle, ellipse, path, text { vector-effect: non-scaling-stroke;} /* main line */ .line-type-1 { fill: none; stroke: blue; stroke-width: 2;} /* hairline */ .line-type-2 { fill: none; stroke: black; stroke-width: .7;} /* axial */ .line-type-3 { fill: none; stroke: red; stroke-width: .7; stroke-dasharray: 25, 4, 3, 4;} /* dashed */ .line-type-4 { fill: none; stroke: black; stroke-width: .7; stroke-dasharray: 7, 4;} ...
And in the drawing using the tag line on awarding the class type of line.
<line class="line-type-1" x1="0" y1="0" x2="500" y2="0"/>
Tag line property is set vector-effect with a value non-scaling-stroke. At any given scale lines are drawn with a uniform thickness.
Line can be written in a different way to minimize code.
<path class="line-type-1" d="M0,0L500,0"/>
Circle
Types of lines for use as a tag line of the CSS file.
In the drawing, use the tag circle on awarding the class type of the line.
<circle class="line-type-1" cx="165" cy="25" r="125"/>
Ellipse
Types of lines for use as a tag line of the CSS file.
In the drawing, use the tag ellipse on awarding the class type of the line.
<ellipse class="line-type-3" cx="120" cy="280" rx="100" ry="50"/>
The arc and the arc of the ellipse
Types of lines for use as a tag line of the CSS file.
And in the drawing using the tag path on awarding the class type of the line. In the property d sets parameters of the arc.
<path class="line-type-2" d="M50,50 A140,140 0 0 1 200,350"/> <path class="line-type-3" d="M20,150 A20,40 0 0 1 130,50"/>
Rectangle
Types of lines for use as a tag line of the CSS file.
And in the drawing using the tag rect on awarding the class type of the line.
<rect class="line-type-1" x="20" y="5" width="395" height="287"/>
Polyline
Types of lines for use as a tag line of the CSS file.
And in the drawing using the tag polyline on awarding the class type of the line.
<polyline class="line-type-7" points="20,250 50,250 60,300 80,120 120,140 200,180"/>
NURBS curve
Types of lines for use as a tag line of the CSS file.
And in the drawing using the tag path on awarding the class type of the line.
<path class="line-type-2" 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"/>
1 Comment
Test 3
Submitted by center_sapr on
Тест 3