Изучаем основы SVG для оформления сцен и домашних страниц

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

Изучаем основы SVG для оформления сцен и домашних страниц

Сообщение Bagir » Сб фев 28, 2015 12:53 pm

Масштабируемая векторная графика (SVG) – язык для описания двумерной графики в формате XML. Под встроенным SVG понимают код, написанный прямо внутри HTML, чтобы сгенерировать в браузере графику.
Вы можете без труда рисовать любые простые автофигуры и даже поллинию. Но это далеко не все. Понять суть мне очень помог вот этот сайт. Советую вкратце ознакомиться, чтобы понимать как это работает.
Кроме рисования фигур и линий, можно еще заливать все это добро градиентом. А еще можно заливать даже саму линию или текст. Причем для этого не нужно писать горы кода. SVG сделает все сам. Вот интересный пример. Не буду показывать результат. Пускай будет сюрприз )) Создайте новый элемент на сцене с типом html и скопируйте в него код. Стоит обратить внимание, что имя element29gradient1 должно быть уникальным для всего html документа. То есть, в итоге, для всей страницы МД! Добиться уникальности не сложно. Впишите имя элемента а за ним имя или номер своего градиента.

Код: Выделить всё

<svg width="405" height="105">
  <defs>
    <linearGradient id="element29gradient1">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="100%" stop-color="#0000ff" />
    </linearGradient>
  </defs>

  <polyline points="5 20, 20 20, 25 10, 35 30, 45 10, 55 30, 65 10, 75 30, 80 20, 95 20" stroke="url(#element29gradient1)" stroke-width="7px" fill="none" />
</svg>
Теперь можно быстро нарисовать например свою систему отопления, и если на ней есть термодатчики, то градиентная заливка покажет температуру труб. Добавив индикацию включения циркуляционных насосов и положения клапанов, можно собрать весьма нужные данные, которые расскажут о некоторых моментах работы вашей системы отопления.
Я уже задумал добавить на элемент погоды значок направления ветра. 8 разных файлов с картинками для этого добавлять мне как то совсем не хотелось, а SVG позволит нарисовать все в коде самого элемента.
За это сообщение автора Bagir поблагодарили (всего 3):
Vit (Сб фев 28, 2015 4:05 pm) • Supermin (Сб фев 28, 2015 4:55 pm) • Otto (Ср июн 01, 2016 2:13 pm)
Рейтинг: 3.49%
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Vit
Сообщения: 867
Зарегистрирован: Вт янв 17, 2012 12:31 pm
Благодарил (а): 121 раз
Поблагодарили: 78 раз

Re: Изучаем основы SVG для оформления сцен и домашних страни

Сообщение Vit » Сб фев 28, 2015 4:02 pm

Bagir писал(а):
очень хорошая и нужная часть для наглядности (отопление есть у всех)
а пример можно хотя бы части трубы.... и как их загнуть в систему отопления?)
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

Re: Изучаем основы SVG для оформления сцен и домашних страни

Сообщение Bagir » Сб фев 28, 2015 6:04 pm

Сам только еще рисую сейчас. Очень помогает начертить все на листе в клеточку с масштабом, записать координаты поворотов и потом быстренько все перенести в полилинию. По задумке градиентная заливка будет показывать температуру трубы. Для теста закрашиваю от синего к красному. Потом завязу на температуру датчиков. Но сейчас столкнулся с проблемой заливки змейки.
Изображение
Видно, что линия заливается не по ее ходу, а просто слева на право. Получается просто горизонтальная заливка. Наверняка есть еще и вертикальная. А вот есть ли по ходу линии я не знаю. На вскидку не нашел. Буду искать. Если так сделать не получится, придется отказаться от змейки и заменить на одну линию. Змейкой я нарисовал регистр в гараже.
Линии добавлять очень просто. Копируйте тег <polyline> и все. Когда доделаю покажу что будет.
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Vit
Сообщения: 867
Зарегистрирован: Вт янв 17, 2012 12:31 pm
Благодарил (а): 121 раз
Поблагодарили: 78 раз

Re: Изучаем основы SVG для оформления сцен и домашних страни

Сообщение Vit » Сб фев 28, 2015 6:20 pm

[quote="Bagir"][/quote]

ок..будем ждать
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

Re: Изучаем основы SVG для оформления сцен и домашних страни

Сообщение Bagir » Сб фев 28, 2015 6:21 pm

Нашел только вариант как повернуть градиент вертикально, горизонтально, или под нужным углом. Вот. В принципе, если удачно комбинировать линии, то вполне можно выкрутиться.
За это сообщение автора Bagir поблагодарил:
Vit (Сб фев 28, 2015 6:25 pm)
Рейтинг: 1.16%
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Palko
Сообщения: 59
Зарегистрирован: Вт авг 26, 2014 1:59 pm
Откуда: Новосибирск
Благодарил (а): 8 раз
Поблагодарили: 6 раз

Re: Изучаем основы SVG для оформления сцен и домашних страни

Сообщение Palko » Сб фев 28, 2015 7:31 pm

вот потренироваться можно и сразу код сгенерить.
http://svg-edit.googlecode.com/svn-hist ... ditor.html
Ivan
Сообщения: 1473
Зарегистрирован: Сб окт 12, 2013 11:03 pm
Благодарил (а): 49 раз
Поблагодарили: 327 раз

Re: Изучаем основы SVG для оформления сцен и домашних страни

Сообщение Ivan » Вс мар 01, 2015 12:51 am

Рисуйте несколько отрезков. Наложенных. И поворачивайте под нужным углом градиент

Только непонятно зачем трубам градиент
Linux, Raspberry PI, MySensors
Connect: http://connect.smartliving.ru/profile/53
Мои проекты: http://smartliving.ru/profile/4
Аватара пользователя
shemnik69
Сообщения: 590
Зарегистрирован: Пн дек 24, 2012 3:01 pm
Откуда: Саратов Saratov
Благодарил (а): 67 раз
Поблагодарили: 63 раза

Re: Изучаем основы SVG для оформления сцен и домашних страни

Сообщение shemnik69 » Пн мар 02, 2015 8:39 pm

Bagir!
Превосходный вариант!
У меня как раз на отоплении присутствует 2 датчика подача и обратка.
А также на ветке (гребенке) теплого пола. Превосходный инструмент получается особенно если его отражать скажем на планшете. Цифровое представление температуры хоть и предельно информативно но скажем визуально "острее" реагируешь именно на "синий трубопровод"..."котел стоит" :o :D
Реализую обязательно.
Спасибо!
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

Re: Изучаем основы SVG для оформления сцен и домашних страни

Сообщение Bagir » Пн мар 02, 2015 9:36 pm

Как доделаю до момента где уже не стыдно показать, выложу что получилось. У меня с трех котлов идет разбор тепла на регистры, калорифер приточной вентиляции, теплый пол и баню по подземной трубе. Плюсом очень хочется добавить солнечный коллектор в систему. Так что тут будет на что посмотреть ))
Когда полностью закончу, хоть будет это и не скоро, на некоторых участках, где падение температуры практически нет, трубы будут просто залиты одним цветом, отражающим температуру. А вот участки где идет расход тепла будут залиты градиентом. Пока что на схеме данные температуры я от балды проставил. Но выглядит уже интересно.
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

Re: Изучаем основы SVG для оформления сцен и домашних страни

Сообщение Bagir » Вт мар 03, 2015 1:31 am

Кстати вот еще на тему заливки.
Изображение
Попробуйте поиграться с цифрой 70% в этом примере. Первые два цвета дадут плавную градиентную заливку полосы. А третий цвет можно использовать как фон.

Код: Выделить всё

<svg width="405" height="105">
  <defs>
    <linearGradient id="Gradient1" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0%" stop-color="#BBC42A" />
      <stop offset="70%" stop-color="#00C42A" />
      <stop offset="0%" stop-color="#ED6E46" />
    </linearGradient>
  </defs>
  <rect x="2" y="2" width="400" height="100" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
</svg> 
Можно даже в каком нибудь онлайн редакторе. Например вот. Я уже придумал как это использовать. В отличии от CSS, который для этого вероятно просто не был задуман, хоть на нем тоже можно легко сделать вертикальный или горизонтальный прогрессбар, svg позволяет легко рисовать полигоны.
За это сообщение автора Bagir поблагодарил:
~220v (Чт май 18, 2023 6:03 pm)
Рейтинг: 1.16%
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Ответить