×
=0) { let js = text.slice(pos1, pos2); + '<\/' + "script" + '>'; arrText.push(js); // next pos1 = pos2; continue; } } } break; } return arrText; } function OpenDialog(parentDiv, urlContent) { parentDiv = document.getElementById('modal-background'); // new !!!!!!! parentDiv.appendChild(document.getElementById('modal-template')); document.getElementById('modal-background').style.display = "block"; document.getElementById('modal-template').style.display = "flex"; // !!!!! document.getElementById('modal-body').innerHTML = ""; post_url(urlContent, "", function(text_from_server) { var element = document.getElementById('modal-body'); element.innerHTML = text_from_server; // add scripts var arrJSText = get_scripts(text_from_server); for (var i=0; i
dir.by
Праздники ...
Праздники ...
День Святого Валентина (14 Февраля)
Концерты, выставки, цирки ...
Концерты, выставки, цирки ...
Спектакль "Ревизор" по пьесе Гоголя г. Минск 8 января, 9 января, 27 февраля 2026
Афишу
Спорт занятия ...
Спорт занятия ...
Аквааэробика
Спорт занятие
Компьютеры, игры, программирование
Компьютеры, игры, программирование
Объявления ...
Объявления ...
продам спальню
Объявление
Форум (ваши вопросы, обсуждение)
Форум (ваши вопросы, обсуждение)
Поиск
Программирование, разработка, тестирование
→
Html & CSS
→
<svg> векторная графика, рисуем линию<line>, прямоугольник <rect>, круг<circle>, текст<text>
Посмотрели
8512
раз(а)
<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> рисуем прямоугольник
Ваши Отзывы ... комментарии ...
Вашe имя
Ваш комментарий
(www ссылки может добавлять только залогиненный пользователь)
+ картинку
Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
Объявления
Объявления
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