Страница 1 из 2

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

Добавлено: Сб фев 28, 2015 12:53 pm
Bagir
Масштабируемая векторная графика (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 позволит нарисовать все в коде самого элемента.

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

Добавлено: Сб фев 28, 2015 4:02 pm
Vit
Bagir писал(а):
очень хорошая и нужная часть для наглядности (отопление есть у всех)
а пример можно хотя бы части трубы.... и как их загнуть в систему отопления?)

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

Добавлено: Сб фев 28, 2015 6:04 pm
Bagir
Сам только еще рисую сейчас. Очень помогает начертить все на листе в клеточку с масштабом, записать координаты поворотов и потом быстренько все перенести в полилинию. По задумке градиентная заливка будет показывать температуру трубы. Для теста закрашиваю от синего к красному. Потом завязу на температуру датчиков. Но сейчас столкнулся с проблемой заливки змейки.
Изображение
Видно, что линия заливается не по ее ходу, а просто слева на право. Получается просто горизонтальная заливка. Наверняка есть еще и вертикальная. А вот есть ли по ходу линии я не знаю. На вскидку не нашел. Буду искать. Если так сделать не получится, придется отказаться от змейки и заменить на одну линию. Змейкой я нарисовал регистр в гараже.
Линии добавлять очень просто. Копируйте тег <polyline> и все. Когда доделаю покажу что будет.

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

Добавлено: Сб фев 28, 2015 6:20 pm
Vit
[quote="Bagir"][/quote]

ок..будем ждать

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

Добавлено: Сб фев 28, 2015 6:21 pm
Bagir
Нашел только вариант как повернуть градиент вертикально, горизонтально, или под нужным углом. Вот. В принципе, если удачно комбинировать линии, то вполне можно выкрутиться.

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

Добавлено: Сб фев 28, 2015 7:31 pm
Palko
вот потренироваться можно и сразу код сгенерить.
http://svg-edit.googlecode.com/svn-hist ... ditor.html

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

Добавлено: Вс мар 01, 2015 12:51 am
Ivan
Рисуйте несколько отрезков. Наложенных. И поворачивайте под нужным углом градиент

Только непонятно зачем трубам градиент

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

Добавлено: Пн мар 02, 2015 8:39 pm
shemnik69
Bagir!
Превосходный вариант!
У меня как раз на отоплении присутствует 2 датчика подача и обратка.
А также на ветке (гребенке) теплого пола. Превосходный инструмент получается особенно если его отражать скажем на планшете. Цифровое представление температуры хоть и предельно информативно но скажем визуально "острее" реагируешь именно на "синий трубопровод"..."котел стоит" :o :D
Реализую обязательно.
Спасибо!

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

Добавлено: Пн мар 02, 2015 9:36 pm
Bagir
Как доделаю до момента где уже не стыдно показать, выложу что получилось. У меня с трех котлов идет разбор тепла на регистры, калорифер приточной вентиляции, теплый пол и баню по подземной трубе. Плюсом очень хочется добавить солнечный коллектор в систему. Так что тут будет на что посмотреть ))
Когда полностью закончу, хоть будет это и не скоро, на некоторых участках, где падение температуры практически нет, трубы будут просто залиты одним цветом, отражающим температуру. А вот участки где идет расход тепла будут залиты градиентом. Пока что на схеме данные температуры я от балды проставил. Но выглядит уже интересно.

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

Добавлено: Вт мар 03, 2015 1:31 am
Bagir
Кстати вот еще на тему заливки.
Изображение
Попробуйте поиграться с цифрой 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 позволяет легко рисовать полигоны.