Чертежи в SVG формате. Часть 2 — Черновик стандарта

В "Чертежи в SVG формате. Часть 1 — Черновик стандарта" приведён пример объектной модели чертежа, задания масштаба и стилей линий. В продолжении рассмотрим рисование простых графических объектов из CAD систем.

Простые графические объекты

В CAD системах используются следующие простые графические объекты:

Точка (маркер)

Шаблон и стили отображения точки мы рисуем в defs части чертежа.

<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>

Выводим точку в чертеже с помощью тега path. В свойстве stroke-width задаём обратный масштаб вида, если масштаб вида 1:4, то для точки указываем масштаб 4:1.

<path stroke-width="4" d="M50,35" marker-end="url(#Point0)"/>

Линия

В CSS файле описываем типы линий.

line, rect, circle, ellipse, path, text {
  vector-effect: non-scaling-stroke;
}
/* основная */
.line-type-1 {
  fill: none;
  stroke: blue;
  stroke-width: 2;
}
/* тонкая */
.line-type-2 {
  fill: none;
  stroke: black;
  stroke-width: .7;
}
/* осевая */
.line-type-3 {
  fill: none;
  stroke: red;
  stroke-width: .7;
  stroke-dasharray: 25, 4, 3, 4;
}
/* штриховая */
.line-type-4 {
  fill: none;
  stroke: black;
  stroke-width: .7;
  stroke-dasharray: 7, 4;
}
...

А в чертеже используем тег line с присваиванием ему класса типа линии.

<line class="line-type-1" x1="0" y1="0" x2="500" y2="0"/>

Для тега line задано свойство vector-effect с значением non-scaling-stroke. В любом заданном масштабе для вида линии будут отрисовываться с одинаковой толщиной.

Окружность

Типы линий используем как и для тега line из CSS файла.
А в чертеже используем тег circle с присваиванием ему класса типа линии.

<circle class="line-type-1" cx="165" cy="25" r="125"/>

Эллипс

Типы линий используем как и для тега line из CSS файла.
А в чертеже используем тег ellipse с присваиванием ему класса типа линии.

<ellipse class="line-type-3" cx="120" cy="280" rx="100" ry="50"/>

Дуга и дуга эллипса

Типы линий используем как и для тега line из CSS файла.
А в чертеже используем тег path с присвоением ему класса типа линии. В свойстве d задаём параметры дуги.

<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"/>

Прямоугольник

Типы линий используем как и для тега line из CSS файла.
А в чертеже используем тег rect с присвоением ему класса типа линии.

<rect class="line-type-1" x="20" y="5" width="395" height="287"/>

Ломаная линия

Типы линий используем как и для тега line из CSS файла.
А в чертеже используем тег polyline с присвоением ему класса типа линии.

<polyline class="line-type-7" points="20,250 50,250 60,300 80,120 120,140 200,180"/>

Кривая NURBS (сплайн)

Типы линий используем как и для тега line из CSS файла.
А в чертеже используем тег path с присвоением ему класса типа линии.

<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"/>