Закрыть
×
=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
Праздники ...
Праздники ...
День Октябрьской революции (7 Ноября)
Концерты, выставки ...
Концерты, выставки ...
Музыкальная сказка "Тот самый Карлсон и Малыш"|||г. Минск 20 сентября 2026
Афишу
Спорт занятия ...
Спорт занятия ...
Катание на коньках
Спорт занятие
Компьютер, программы...
Компьютер, программы...
Объявления ...
Объявления ...
POWERCLEANIN – очиститель под высоким давлением для испарителей
Объявление
Новости ...
Новости ...
Форум ...
Форум ...
обсуждение...
Поиск
Концерты
Спорт
Форум
Компьютер
Компьютер, программы
→
Html & CSS
<svg> vector graphics
посмотрели
9866
раз
обновлено: 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(...) is a JavaScript method for finding elements inside another HTML element
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
<BR>
HTML search for an element, elements
•
document.querySelector(...) is a JavaScript method for finding an element from document (i.e. in all HTML)
•
yourElement.querySelectorAll(...) is a JavaScript method for finding elements inside another HTML element
<BR>
HTML svg (vector graphics for drawing lines, rectangles, ellipses, ...)
•
<svg> vector graphics, drawing a line<line>, rectangle <rect>, circle<circle>, text<text>
<BR>
HTML canvas (drawing pictures, text, shapes)
•
HTML <canvas> drawing a rectangle
•
HTML drawing <canvas> lines by clicking on the 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 (the element can stretch or shrink and thus fill the free space)
•
What is CSS flex
Freeze
•
The header in the table is always visible when scrolling | freeze header in table | HTML
•
Div is always visible when scrolling (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
•
Animation of the little man on the spot. For <div>animation, we use CSS styles: "animation", "background-image", "background-position", "keyframes"
•
Animation of a man in motion (sprite). For <div><img>animation we use CSS styles: "animation", "background-image", "background-position", "keyframes"
•
Draw a picture with movement. Use the HTML element<canvas>. Use JavaScript for movement: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
•
Drawing a picture with movement and animation (sprite). Use the HTML element <canvas>. Use JavaScript for movement: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Web page on the phone
•
I open a web page on my phone in Google Chrome. Why does double-clicking increase the page size?
Layout, page design
•
What the Front-end development?
•
How to Identify a Device (Tablet, Computer, Phone) Currently Used in JavaScript, HTML
•
How to make your site work on a phone, tablet, computer using css media and max-device-width and 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
•
What is Adaptive design? What is responsive design?
•
Change the color of the scrollbar for the HTML page. Using CSS
WWW sites for learning
•
Sites to explore HTML
Ваши вопросы присылайте по почте:
info@dir.by