Изучаем основы SVG для оформления сцен и домашних страниц
Добавлено: Сб фев 28, 2015 12:53 pm
Масштабируемая векторная графика (SVG) – язык для описания двумерной графики в формате XML. Под встроенным SVG понимают код, написанный прямо внутри HTML, чтобы сгенерировать в браузере графику.
Вы можете без труда рисовать любые простые автофигуры и даже поллинию. Но это далеко не все. Понять суть мне очень помог вот этот сайт. Советую вкратце ознакомиться, чтобы понимать как это работает.
Кроме рисования фигур и линий, можно еще заливать все это добро градиентом. А еще можно заливать даже саму линию или текст. Причем для этого не нужно писать горы кода. SVG сделает все сам. Вот интересный пример. Не буду показывать результат. Пускай будет сюрприз )) Создайте новый элемент на сцене с типом html и скопируйте в него код. Стоит обратить внимание, что имя element29gradient1 должно быть уникальным для всего html документа. То есть, в итоге, для всей страницы МД! Добиться уникальности не сложно. Впишите имя элемента а за ним имя или номер своего градиента.Теперь можно быстро нарисовать например свою систему отопления, и если на ней есть термодатчики, то градиентная заливка покажет температуру труб. Добавив индикацию включения циркуляционных насосов и положения клапанов, можно собрать весьма нужные данные, которые расскажут о некоторых моментах работы вашей системы отопления.
Я уже задумал добавить на элемент погоды значок направления ветра. 8 разных файлов с картинками для этого добавлять мне как то совсем не хотелось, а SVG позволит нарисовать все в коде самого элемента.
Вы можете без труда рисовать любые простые автофигуры и даже поллинию. Но это далеко не все. Понять суть мне очень помог вот этот сайт. Советую вкратце ознакомиться, чтобы понимать как это работает.
Кроме рисования фигур и линий, можно еще заливать все это добро градиентом. А еще можно заливать даже саму линию или текст. Причем для этого не нужно писать горы кода. 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 позволит нарисовать все в коде самого элемента.