×
=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
Search
Programming, development, testing
→
Html & CSS
→
<svg> vector graphics, drawing a line<line>, rectangle <rect>, circle<circle>, text<text>
Looked at
7766
times
<svg> vector graphics
last updated: 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