Создаём чертёж в формате SVG, часть 1

в 10:11, , рубрики: cad, cad online, CAD/CAM, svg, векторная графика, ооп, сапр, метки: , , , ,

В интернете можно найти много разной информации о создании чертежей в формате SVG. Чаще предлагается какой то редактор и экспорт из формата DXF в SVG. Просматривая код SVG сразу видно что там много лишнего. Созданный в одном редакторе файл SVG не всегда может корректно открыться в другом. Одно радует, что браузеры начали поддерживать SVG формат. Всюду пишут про недостатки использования SVG. А может надо придерживаться единых правил структуры файла для отображения чертежей?

Из экспериментов и тестов пришёл к таким правилам при создании чертёжа:
— использование объектной модели чертежа;
— один пиксель равен одному миллиметру;
— масштаб описания элементов всегда 1:1;
— для уникальных объектов задаём ID а для характерных Class

Объектная модель чертежа.
Упрощенно чертёж можно описать в виде XML структуры.

<svg id="Detail1" ...>
    <defs id="defsCAD"> ... </defs>
    <svg id="View1" ... >
        <line class="atr1" ... />
        <line class="atr1" ... />
        <circle class="atr1" ... />
        <path class="atr1" ... />
        <rect class="atr1" ... />
        <line class="atr2" ... />
        <line class="atr2" ... />
        <g class="dimL">
            <line class="atr2" ... />
            <line class="atr2" ... />
            <line class="atr2" ... />
            <text ... >...</text> 
        </g>
        ...
    </svg>
    <svg id="View2" ... >
        <line class="atr1" ... />
        ...
    </svg>
    <svg id="View3" ... > ... </svg>
</svg>

<svg> — тег используется для описания самого чертежа и встроенных видов. Если необходимо использовать масштаб отличный от 1:1, то реализуется с помощью свойств тега.
<defs> — здесь описываем все примитивные повторяющиеся элементы. Замечена одна особенность при использовании SVG элемента Marker — на него не действуют параметры масштаба из тега <svg> что на много упрощает работу с масштабом. (В каком масштабе виды не рисовались, стрелки в размерах должны быть одинаковые).
<line class=«atr1» .../> — в файле CSS описываем стили линий для графических примитивов. Жаль что для каждого масштаба необходимо указывать свой стиль линии(толщина линии и интервал пунктиров). Как правило в чертеже одновременно не используются все возможные масштабы и достаточно задать только для используемых масштабов.
<g class=«dimL»>...</g> — элементы описывающие объекты как размер группируем.

Пример описания стилей линий для элементов line, circle, path, rect и др.

 /* основная */
  .atr1 {fill: none; stroke: blue;
            stroke-width: 2} 
 /* тонкая */
  .atr2 {fill: none; stroke: black;
            stroke-width: 1}
 /* осевая */
  .atr3 {fill: none; stroke: red;
            stroke-width: 1; stroke-dasharray: 60, 20, 10, 20}
/* штриховая */
  .atr4 {fill: none; stroke: black;
            stroke-width: 1; stroke-dasharray: 30} 
/* для линии обрыва */
  .atr5 {fill: none; stroke: black;
            stroke-width: 1}
/* утолщеная */ 
  .atr7 {fill: none; stroke: teal;
            stroke-width: 4}
/* пунктир 2 */ 
  .atr8 {fill: none; stroke: black;
            stroke-width: 1; stroke-dasharray: 60, 20, 10, 20, 10, 20} 
/* штриховая осн. */
  .atr9 {fill: none; stroke: blue;
            stroke-width: 2; stroke-dasharray: 40}
/* осевая осн. */ 
  .atr10 {fill: none; stroke: blue;
              stroke-width: 2; stroke-dasharray: 10, 20, 60, 20} 
/*тонкая */
  .atr11 {fill: none; stroke: black;
              stroke-width: 0.7}

Демонстрационный пример чертежа

Автор: viklviv

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js