<svg> векторная графика, рисуем линию<line>, прямоугольник <rect>, круг<circle>, текст<text>

Поиск

Программирование, разработка, тестирование

→

Html & CSS

→

<svg> векторная графика, рисуем линию<line>, прямоугольник <rect>, круг<circle>, текст<text>

Посмотрели 8067 раз(а)

<svg> векторная графика

последнее обновление: 13 ноября 2018

Внутри <svg> могут находится элементы:
<rect> прямоугольник
<circle> круг
<ellipse> эллипс
<line> линия
<polygon> полигон
<polyline> полилиния
<path> путь
<text> текст
<linearGradient> линейный градиент (переход из одного цвета в другой)
<radialGradient> радиальный градиент (переход из одного цвета в другой)
<filter> фильтр
   <feBlend>
   <feColorMatrix>
   <feComponentTransfer>
   <feComposite>
   <feConvolveMatrix>
   <feDiffuseLighting>
   <feDisplacementMap>
   <feFlood>
   <feGaussianBlur>
   <feImage>
   <feMerge>
   <feMorphology>
   <feOffset>
   <feSpecularLighting>
   <feTile>
   <feTurbulence>
   <feDistantLight>
   <fePointLight>
   <feSpotLight>

Пример: прямоугольник, линия, текст

Html прямоугольник, линия, текст

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="550" height="260">

          
          <rect x="50" y="50" width="474" height="174" rx="8" ry="8" fill="#0bc194" stroke="#000">
          </rect>

          
          <line x1="70" y1="70" x2="200" y2="200" style="stroke:rgb(0, 0, 255); stroke-width:2" />

          
          <text x="260" y="140" stroke="none" fill="#000000" style="font-size: 24px;">
               Привет!
          </text>
</svg>

Пример: круг

Html круг

<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Пример: эллипс

Html эллипс

<svg width="260" height="170">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:yellow; stroke:purple; stroke-width:2;" />
</svg>

Пример: полигон

Html полигон

<svg width="300" height="210">
<polygon points="200,10 250,190 160,210" style="fill:lime; stroke:purple; stroke-width:1;" />
</svg>

Пример: полилиния

Html полилиния

<svg width="340" height="200">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none; stroke:black; stroke-width:3" />
</svg>

Пример: Path

<path> использует команды:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

Все эти команды могут писаться маленькими буквами: m, l, h, v и т.д.
Маленькие буквы m, l, h, ... означают относительные позиции
Большие буквы M, L, H, ... означают абсолютные позиции

Html Путь

<svg height="210" width="300">
<path d="M150 0 L75 200 L225 200 Z" stroke="blue" fill="red"/>
</svg>

Пример: Фильтр <feGaussianBlur>

Html Фильтр <feGaussianBlur>

<svg width="110" height="110">
     <defs>
          <filter id="f1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
          </filter>
     </defs>
     <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

Пример: Фильтр <feOffset>

Html Фильтр <feOffset>

<svg width="120" height="120">
     <defs>
          <filter id="f1" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
               <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
          </filter>
     </defs>
     <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

Пример: <linearGradient>

Html linearGradient

<svg width="400" height="150">
     <defs>
          <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
               <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
               <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
          </linearGradient>
     </defs>
     <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Пример: <radialGradient>

Html radialGradient

<svg width="300" height="150">
     <defs>
          <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
               <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
               <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
          </radialGradient>
     </defs>
     <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

← Предыдущая тема
yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента

Следующая тема →
HTML <canvas> рисуем прямоугольник

Ваши Отзывы ... комментарии ...

Объявления

Объявления

HTML элементы

• HTML тег <a> ссылка для перехода на другую страницу

• HTML тег <abbr> показывает сокращенное название, если подвести мышку будет всплывающая надпись

• HTML теги fieldset и legend. Это рамка с заголовком

• HTML тег  комментарий

• style="border" В HTML

HTML поиск элемента, элементов

• document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)

• yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента

HTML svg (векторная графика для рисования линий, прямоугольников, эллипсов, ...)

• <svg> векторная графика, рисуем линию<line>, прямоугольник <rect>, круг<circle>, текст<text>

HTML canvas (рисование картинок, текста, фигур)

• HTML <canvas> рисуем прямоугольник

• HTML <canvas> рисуем линии по нажатию мышкой на Canvas

• HTML <canvas> рисуем картинки

• HTML <canvas> рисуем картинку с поворотом

• HTML <canvas> рисуем картинку с горизонтальным отражением

• HTML <canvas> рисуем картинку и текст

• HTML <canvas> рисуем картинку много раз в прямоугольнике (шаблон)

• HTML <canvas> как получить координаты мыши ? Определяем позицию мыши.

• HTML <canvas> рисуем змею линиями moveTo, lineTo

CSS

• CSS описание

• После изменения файла css , в браузере раз за разом отображаются старые стили. Почему?

• Книги для изучения CSS

CSS flex (элемент может растягиваться или сжиматься и таким образом заполнять свободное пространство)

• Что такое CSS flex

Freeze

• Шапка в таблице всегда видна при скролинге | freeze header in table | HTML

• Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML

Делаем Popup используя HTML и Javascript

• Как сделать Popup окно в HTML странице | Javascript, HTML, CSS

Движение и анимация картинок

• Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

• Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

• Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval

• Рисуем картинку с движением и анимацией (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval

Web страница на телефоне

• Открываю web страницу на телефоне в Google Chrome. Почему при двойном нажатии размер страницы увеличивается?

Верстка, дизайн страницы

• Что такое Front-end разработка?

• Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML

• Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS

• Как сделать чтобы ваш сайт соответствовал по размерам на телефоне, планшете ? (HTML meta с атрибутом name='viewport')

• Правильная верстка HTML. Плохо использовать table. Нужно использовать div

• Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?

• Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS

WWW сайты для изучения

• Сайты для изучения HTML

Ваши вопросы присылайте по почте: info@dir.by