Из экспериментов и тестов пришёл к таким правилам при создании чертёжа:
— использование объектной модели чертежа;
— один пиксель равен одному миллиметру;
— масштаб описания элементов всегда 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}
ссылка на оригинал статьи http://habrahabr.ru/post/184958/
Добавить комментарий