Закрыть
×
=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 = "flex"; // !!!!! 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
Праздники ...
Праздники ...
День города Минска (2-ая суббота сентября) (9 и 10 сентября 2023)
Концерты, выставки ...
Концерты, выставки ...
бесплатная консультация АРХИТЕКТОРА второй четверг каждого месяца|||г. Минск с 11 июня 2026 по 1 января 2028
Афишу
Спорт занятия ...
Спорт занятия ...
Фитнес: Аэробика (Степ, Фитбол, Слайд, Силовая), Body Combat, Body Flex
Спорт занятие
Компьютер, программы...
Компьютер, программы...
Объявления ...
Объявления ...
мебель
Объявление
Новости ...
Новости ...
Форум ...
Форум ...
обсуждение...
Поиск
Концерты
Спорт
Форум
Компьютер
Компьютер, программы
→
Html & CSS
<svg> vector graphics
посмотрели
9449
раз
обновлено: 13 November 2018
Inside
<svg>
Can find the following items:
<rect>
rectangle
<circle>
circle
<ellipse>
ellipse
<line>
line
<polygon>
polygon
<polyline>
Polyline
<path>
path
<text>
text
<linearGradient>
linear gradient (transition from one color to another)
<radialGradient>
radial gradient (transition from one color to another)
<filter>
filter
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
<feDistantLight>
<fePointLight>
<feSpotLight>
Example: rectangle, line, text
Html
rectangle, line, text
<svg
xmlns=
"http://www.w3.org/2000/svg"
version=
"1.1"
width=
"550"
height=
"260"
>
<!-- rectangle -->
<rect
x=
"50"
y=
"50"
width=
"474"
height=
"174"
rx=
"8"
ry=
"8"
fill=
"#0bc194"
stroke=
"#000"
>
</rect>
<!-- line -->
<line
x1=
"70"
y1=
"70"
x2=
"200"
y2=
"200"
style=
"stroke:rgb(0, 0, 255); stroke-width:2"
/>
<!-- text -->
<text
x=
"260"
y=
"140"
stroke=
"none"
fill=
"#000000"
style=
"font-size: 24px;"
>
Hello!
</text>
</svg>
Example: Circle
Html
circle
<svg
height=
"100"
width=
"100"
>
<circle
cx=
"50"
cy=
"50"
r=
"40"
stroke=
"black"
stroke-width=
"3"
fill=
"red"
/>
</svg>
Example: Ellipse
Html
ellipse
<svg
width=
"260"
height=
"170"
>
<ellipse
cx=
"100"
cy=
"80"
rx=
"100"
ry=
"50"
style=
"fill:yellow; stroke:purple; stroke-width:2;"
/>
</svg>
Example: Polygon
Html
polygon
<svg
width=
"300"
height=
"210"
>
<polygon
points=
"200,10 250,190 160,210"
style=
"fill:lime; stroke:purple; stroke-width:1;"
/>
</svg>
Example: Polylines
Html
Polyline
<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>
Example: Path
<path>
uses the following commands:
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
All these commands can be written in small letters: m, l, h, v etc.
Small letters
m, l, h, ... denote relative positions
Capital letters
M, L, H, ... mean absolute positions
Html
Path
<svg
height=
"210"
width=
"300"
>
<path
d=
"M150 0 L75 200 L225 200 Z"
stroke=
"blue"
fill=
"red"
/>
</svg>
Example: Filter <feGaussianBlur>
Html
Filter <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>
Example: Filter <feOffset>
Html
Filter <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>
Example: <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>
Example: <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>
← Previous topic
yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента
Next topic →
HTML <canvas> drawing a rectangle
Your feedback ... Comments ...
Your Name
Your comment
(www links can only be added by a logged-in user)
+ Picture
Объявления
Объявления
HTML elements
•
HTML tag <a> link to go to another page
•
HTML tag <abbr> shows an abbreviated name, if you let the mouse down there will be a pop-up inscription
•
HTML tags fieldset and legend. This is a frame with a title
•
HTML tag <!-- --> comment
•
style="border" in the HTML
HTML поиск элемента, элементов
•
document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)
•
yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента
HTML svg (vector graphics for drawing lines, rectangles, ellipses, ...)
•
<svg> vector graphics, drawing a line<line>, rectangle <rect>, circle<circle>, text<text>
HTML canvas (drawing pictures, text, shapes)
•
HTML <canvas> drawing a rectangle
•
HTML <canvas> рисуем линии по нажатию мышкой на Canvas
•
HTML <canvas> we draw pictures
•
HTML <canvas> we draw a picture with a rotation
•
HTML <canvas> draw a picture with horizontal reflection
•
HTML <canvas> we draw a picture and text
•
HTML <canvas> draw a picture many times in a rectangle (template)
•
HTML <canvas> how to get mouse coordinates ? Determine the position of the mouse.
•
HTML <canvas> drawing a snake with lines moveTo, lineTo
CSS
•
CSS description
•
After modifying the file css , the browser displays old styles over and over again. Why?
•
Books to study CSS
CSS flex (элемент может растягиваться или сжиматься и таким образом заполнять свободное пространство)
•
Что такое CSS flex
Freeze
•
Шапка в таблице всегда видна при скролинге | freeze header in table | HTML
•
Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML
Do Popup using HTML and Javascript
•
How to make a Popup window in a HTML page | Javascript, HTML, CSS
Motion and animation of pictures
•
Анимация человечка на месте. Используем 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
•
Drawing a picture with movement and animation (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Web страница на телефоне
•
Открываю web страницу на телефоне в Google Chrome. Почему при двойном нажатии размер страницы увеличивается?
Верстка, дизайн страницы
•
What the Front-end development?
•
Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML
•
Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS
•
How to make your website fit in size on your phone, tablet? (HTML meta with attribute name='viewport')
•
Correct layout HTML. Bad to use table. You need to use div
•
Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?
•
Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS
WWW sites for learning
•
Sites to explore HTML
Ваши вопросы присылайте по почте:
info@dir.by