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

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

    Штриховка.
    Шаблон штриховки рисуем в defs части чертежа используя тег pattern.
    Шаблон для штриховки металла (тип 0) под углом 45°
    <pattern id="hatch0_45" width="20" height="20" patternUnits="userSpaceOnUse">
        <line class="lt2_025 " x1="1" y1="20" x2="20" y2="1" />
        <line class="lt2_025 " x1="0" y1="1" x2="1" y2="0" />
    </pattern>

    Многие заметят и зададут вопрос: — Зачем нарисовано две линии вместо одной с координатами x1=«0» y1=«20» x2=«20» y2=«0»?
    Пример штриховки с одной линией в шаблоне

    если внимательно присмотреться то увидим разрывы в линии штриховки.
    Пример штриховки с двумя линиями в шаблоне

    с двумя линиями таких разрывов нет.

    Фрагмент кода области заштрихованной типом металл под углом 45°
    <path d="M475,225 L475,325 L500,325 L500,225 Z" fill="url(#hatch1_45)"/>

    Шаблон для штриховки металла (тип 0) под углом 30°

    <pattern id="hatch1_30" width="34" height="20" patternUnits="userSpaceOnUse">
        <line class="lt2_025 " x1="2" y1="20" x2="34" y2="1" />
        <line class="lt2_025 " x1="-1" y1="2" x2="3" y2="-1" />
    </pattern>

    Примеры штриховки других материалов

    Шаблон для штриховки неметалла (тип 1) под углом 45°
    <pattern id="hatch2_45" width="34" height="20" patternUnits="userSpaceOnUse">
        <line class="lt2_025 " x1="0" y1="20" x2="20" y2="0" />
        <line class="lt2_025 " x1="0" y1="0" x2="20" y2="20" />
    </pattern>

    Шаблон для штриховки дерева (тип 2), в таком варианте для каждой области штриховки необходимо создавать свой шаблон. Пока другого варианта не придумал, как нарисовать окружности и габарит шаблона больше от области заштриховывания. Может кто-то удачнее решение придумает.
    <pattern id="hatch2_45" width="350" height="350" patternUnits="userSpaceOnUse">
        <circle class="lt2_025" cx="0" cy="0" r="180" fill="none"/>
        <circle class="lt2_025" cx="0" cy="0" r="200" fill="none"/>
        <circle class="lt2_025" cx="0" cy="0" r="220" fill="none"/>
        <circle class="lt2_025" cx="0" cy="0" r="240" fill="none"/>
        <circle class="lt2_025" cx="0" cy="0" r="260" fill="none"/>
        <circle class="lt2_025" cx="0" cy="0" r="280" fill="none"/>
        <circle class="lt2_025" cx="0" cy="0" r="300" fill="none"/>
        <circle class="lt2_025" cx="0" cy="0" r="320" fill="none"/>    
    </pattern>

    Шаблон для штриховки камня естественного (тип 3) под углом 45°
    <pattern id="hatch3_45" width="20" height="20" patternUnits="userSpaceOnUse">
        <line class="lt2_025 " x1="0" y1="20" x2="12" y2="8" />
    </pattern>

    Шаблон для штриховки керамики (тип 4) под углом 45°
    <pattern id="hatch4_45" width="20" height="20" patternUnits="userSpaceOnUse">
        <line class="lt2_025 " x1="0" y1="16" x2="16" y2="0" />
        <line class="lt2_025 " x1="4" y1="20" x2="20" y2="4" />
        <line class="lt2_025 " x1="0" y1="4" x2="4" y2="0" />
        <line class="lt2_025 " x1="16" y1="20" x2="20" y2="16" />
    </pattern>

    Шаблон для штриховки бетона (тип 5) под углом 45°
    <pattern id="hatch5_45" width="20" height="20" patternUnits="userSpaceOnUse">
        <line class="lt2_025 " x1="0" y1="30" x2="6" y2="24" />
        <line class="lt2_025 " x1="10" y1="20" x2="26" y2="4" />
    </pattern>

    Шаблон для штриховки стекла (тип 6) под углом 45°
    <pattern id="hatch5_45" width="30" height="30" patternUnits="userSpaceOnUse">
        <line class="lt2_025 " x1="5" y1="15" x2="13" y2="7" />
        <line class="lt2_025 " x1="5" y1="25" x2="25" y2="5" />
        <line class="lt2_025 " x1="17" y1="23" x2="25" y2="15" />
    </pattern>

    В случаи когда необходимо в заштрихованной области иметь не заштрихованную можно применить такое решение.
    <path class="lt2" d="M0,575L0,600 15,675 100,650 250,675 300,575z"/>
    <path d="M0,575L0,600 15,675 100,650 250,675 300,575z" fill="url(#hatch0_45)"/>
    <circle class="lt2" cx="150" cy="625" r="40"/>
    <circle cx="150" cy="625" r="40" fill="white"/>

    Область окружности накладывается на заштрихованную область.


    Демонстрационный пример чертежа с внешним файлом CSS

    Обновляемая версия статьи

    Средняя зарплата в IT

    120 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 8 924 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 12

      +2
      Так круто это все выглядит.
      Жаль я совсем никак не связан с графиками :-)
        –1
        В Opera 12.15 странно выглядит: 100%, 200%.
          +1
          в CSS прописано
          line, rect, circle, ellipse, path, text {
            vector-effect: non-scaling-stroke;
          }

          Возможно свойство vector-effect в Opera не поддерживается пока.
          Тестирую в Firefox и Chrome.
          0
          Может вы мне сможете ответить: можно ли нарисовать окружность с заданной толщиной линии с помощью одного свг элемента, используя только прямые линии и дуги окружности?

          Просто, я не смог этого придумать, а задавать stroke-wide и рисовать полную окружность вместо заливки области между двумя окружностями как-то не хотелось. В итоге при аффинных преобразованиях иногда «бублик» может на пиксель вылазить за пределы части бублика за счет округления в вычислениях.
            0
            можно попробовать тег path. Нарисовать две дуги почти замкнутые на окружность и заштриховать область между ними. Покажите скан что у Вас выходит и что хотите сделать.
              0
              У меня сейчас нет доступа к коду, но общую суть и так могу передать. Хотел реализовать что такое:
              image
              Возможна ситуация, что внутри этой окружности может быть еще одна и т.д. цвет фона может быть прозрачный и много других мелочей, которые помешают.
              Как нарисовать целую окружность одного цвета?
              1. Нарисовать окружность и внутрь наложить еще одну цвета фона(если фон прозрачный — работает не корректно)
              2. Нарисовать 2 половинки окружности без нахлеста: при зуммировании в FF и хроме иногда проскакивет не прорисованная полоска в точке соединения. Если с нахлестом: опять проблема с прозрачностью.
              3. Нарисовать окружность и задать ей ширину линии. При повороте системы координат округление будет работать немного по разному для дуги окружности(которая рисуется path) и для целого бублика.
              4. Всегда рисовать целую окружность и обрезать ее маской. Единственный рабочий вариант, но в эксплорере жутко тормозит.
              честно говоря не знаю что делать
                0
                Незнаю правельно ли понял я Вас, пример кода и демонстрационный пример
                <path d="M0,-25A25,25 0 0 1 13.4178,21.0941L80.5067,126.5649A150,150 0 0 0 0,-150z" stroke="red" fill="red"/>
                <path d="M13.4178,21.0941A25,25 0 0 1 -12.4329,21.6892L-74.5973,130.1355A150,150 0 0 0 80.5067,126.5649z" stroke="blue" fill="blue"/>
                <path d="M-12.4329,21.6892A25,25 0 0 1 -22.9638,9.8826L-137.7826,59.2956A150,150 0 0 0 -74.5973,130.1355z" stroke="orange" fill="orange"/>

            0
            Шаблон для штриховки дерева

            Можно написать на js функцию, которая будет подгонят под нужные размеры.

            Ну или использовать атрибут transform, может для ваших целей подойдет. Не знаю, что делать с не прямоугольными фигурами в этом случае.
              0
              Хорошо бы плагин для Inkscape.
                0
                И что этот плагин должен делать? :)
                0
                Спасибо, нашёл в статье несколько интересных решений. С Вашего позволения, утащу их в свой проект.
                  0
                  Может быть окажется кому-нибудь полезным:
                  <pattern id="hatch0_45" width="20" height="20" patternUnits="userSpaceOnUse">
                      <line class="lt2_025 " x1="1" y1="20" x2="20" y2="1" />
                      <line class="lt2_025 " x1="0" y1="1" x2="1" y2="0" />
                  </pattern>
                  

                  Смещение должно быть на ширину линии. Так, например, для первой линии x1 = 1 и y2 = 1 означает, что ширина линии штриховки равна 1.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое