dir.by  
  Поиск  
Компьютер, программы
→
Html & CSS
 <svg> vector graphics 
посмотрели 9997 раз
обновлено: 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)

  Объявления  
  Объявления  
 
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