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)

  Объявления  
  Объявления  
 
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  
Яндекс.Метрика