Учебники

SVG — Краткое руководство

Январь 15, 2019

SVG — Обзор

SVG, Scalable Vector Graphics — это язык на основе XML для определения векторной графики.

SVG предназначен для отображения изображений через Интернет.

Будучи векторными изображениями, SVG-изображение никогда не теряет качества, независимо от того, насколько они уменьшены или изменены.

Изображения SVG поддерживают интерактивность и анимацию.

SVG — это стандарт W3C.

Другие форматы изображений, такие как растровые изображения, также могут быть забиты SVG-изображениями.

SVG хорошо интегрируется с XSLT и DOM HTML.

Используйте любой текстовый редактор для создания и редактирования изображений SVG.

Будучи основанными на XML, изображения SVG доступны для поиска, индексации и могут быть написаны и сжаты.

Изображения SVG хорошо масштабируются, поскольку они никогда не теряют качества, независимо от того, насколько они уменьшены или изменены.

Хорошее качество печати при любом разрешении

SVG — открытый стандарт

Размер текстового формата больше, чем у растровых изображений в двоичном формате.

Размер может быть большим даже для маленького изображения.

Следующий фрагмент XML можно использовать для рисования круга в веб-браузере. 

 <svg width = "100" height = "100">
    <circle cx = "50" cy = "50" r = "40" stroke = "red" stroke-width = "2" fill = "green" />
 </ SVG>

Вставьте SVG XML прямо в HTML-страницу.

testSVG.htm 

 <HTML>
    <title> SVG Image </ title>
    <Тело>
   
       <h1> Образец SVG-изображения </ h1>
      
       <svg width = "100" height = "100">
          <circle cx = "50" cy = "50" r = "40" stroke = "red" stroke-width = "2" fill = "green" />
       </ SVG>
   
    </ Body>
 </ Html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. В Internet Explorer элементы управления ActiveX необходимы для просмотра изображений SVG.

Как SVG интегрируется с HTML

  • Элемент <svg> указывает начало изображения SVG.

  • Атрибуты width и height элемента <svg> определяют высоту и ширину SVG-изображения.

  • В приведенном выше примере мы использовали элемент <circle> для рисования круга.

  • Атрибуты cx и cy представляют центр круга. Значение по умолчанию (0,0). Атрибут r представляет радиус окружности.

  • Другие атрибуты обводки и ширины обводки контролируют контур круга.

  • Атрибут fill определяет цвет заливки круга.

  • Закрывающий тег </ svg> указывает на конец изображения SVG.

Элемент <svg> указывает начало изображения SVG.

Атрибуты width и height элемента <svg> определяют высоту и ширину SVG-изображения.

В приведенном выше примере мы использовали элемент <circle> для рисования круга.

Атрибуты cx и cy представляют центр круга. Значение по умолчанию (0,0). Атрибут r представляет радиус окружности.

Другие атрибуты обводки и ширины обводки контролируют контур круга.

Атрибут fill определяет цвет заливки круга.

Закрывающий тег </ svg> указывает на конец изображения SVG.

SVG — фигуры

SVG предоставляет количество фигур, которые можно использовать для рисования изображений. Ниже приведены общие формы.

Sr.No. Тип и описание формы
1 прямоугольник

Используется для рисования прямоугольника.

2 круг

Используется для рисования круга.

3 эллипс

Используется для рисования эллипса.

4 линия

Используется для рисования линии.

5 многоугольник

Используется для рисования замкнутой фигуры, состоящей из соединенных прямых линий.

6 ломаная

Используется для рисования открытой фигуры, состоящей из соединенных прямых линий.

7 дорожка

Используется для рисования любого пути.

Используется для рисования прямоугольника.

Используется для рисования круга.

Используется для рисования эллипса.

Используется для рисования линии.

Используется для рисования замкнутой фигуры, состоящей из соединенных прямых линий.

Используется для рисования открытой фигуры, состоящей из соединенных прямых линий.

Используется для рисования любого пути.

SVG — текст

Элемент <text> используется для рисования текста.

декларация

Ниже приводится объявление синтаксиса элемента <text> . Мы показали только основные атрибуты. 

<text
  x="x-cordinates"
  y="y-cordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

Атрибуты

Sr.No. Атрибут и описание
1 x — координаты оси x глифов.
2 y — координаты оси y глифов.
3 dx — сдвиг вдоль оси x.
4 dy — сдвиг вдоль оси y.
5 вращение — вращение применяется ко всем символам.
6 длина текста — длина рендеринга текста.
7 lengthAdjust — тип корректировки с отображаемой длиной текста.

пример

testSVG.htm 

<html>
   <title>SVG Text</title>
   <body>
      
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

Текст с поворотом 

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
            <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
            <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

Многострочный текст 

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="570" height="100">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
               <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
               <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
   </body>
</html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

Текст гиперссылки 

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="10" >Text as Link: </text>
         
            <a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30" 
               fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

SVG — инсульт

SVG поддерживает несколько свойств штриха.

Ниже приведены основные используемые свойства хода.

Sr.No. Тип и описание инсульта
1 обводка — определяет цвет текста, линии или контура любого элемента.
2 штрих-ширина — определяет толщину текста, линии или контура любого элемента.
3 stroke-linecap — определяет различные типы окончания линии или контура любого пути.
4 обводка — используется для создания пунктирных линий.

пример

testSVG.htm 

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="red" d="M 50 50 L 300 50" />
            <path stroke="green" d="M 50 70 L 300 70" />
            <path stroke="blue" d="M 50 90 L 300 90" />
         </g> 
      </svg>
   
   </body>
</html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

Ширина хода 

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
         <path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
         <path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
      </svg>
      
   </body>
</html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

штрих-linecap 

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="butt" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

штрих-dasharray 

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5,5" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10,10" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6" 
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

SVG — Фильтры

SVG использует элемент <filter> для определения фильтров. Элемент <filter> использует атрибут id для уникальной его идентификации. Фильтры определяются внутри элементов <def>, а затем графические элементы ссылаются по их идентификаторам.

SVG предоставляет богатый набор фильтров. Ниже приведен список наиболее часто используемых фильтров.

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset — фильтр для теней
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

декларация

Ниже приводится объявление синтаксиса элемента <filter> . Мы показали только основные атрибуты. 

 <фильтр
    filterUnits = "единицы для определения области эффекта фильтра"
    primitiveUnits = "единицы для определения субрегиона примитивного фильтра"
   
    х = "координата оси х" 
    y = "координата оси Y"     
   
    ширина = «длина»
    высота = «длина»
   
    filterRes = "числа для области фильтра"
    xlink: href = "ссылка на другой фильтр">
 </ Фильтр>

Атрибуты

Sr.No. Имя и описание
1 filterUnits — единицы для определения области эффекта фильтра. Он определяет систему координат для различных значений длины в фильтре и для атрибутов, определяющих субрегион фильтра. Если filterUnits = «userSpaceOnUse», значения представляют значения в текущей пользовательской системе координат, действующей на момент использования элемента filter. Если filterUnits = «objectBoundingBox», значения представляют значения в долях или процентах от ограничительной рамки для ссылочного элемента, установленного во время использования элемента filter. По умолчанию используется userSpaceOnUse.
2 primitiveUnits — единицы для определения области эффекта фильтра. Он определяет систему координат для различных значений длины в фильтре и для атрибутов, определяющих субрегион фильтра. Если filterUnits = «userSpaceOnUse», значения представляют значения в текущей пользовательской системе координат, действующей на момент использования элемента filter. Если filterUnits = «objectBoundingBox», значения представляют значения в долях или процентах от ограничительной рамки для ссылочного элемента, установленного во время использования элемента filter. По умолчанию используется userSpaceOnUse.
3 x — координата оси x ограничительной рамки фильтра. По умолчанию 0.
4 y — координата оси y ограничивающей рамки фильтра. По умолчанию 0.
5 ширина — ширина ограничительной рамки фильтра. По умолчанию 0.
6 высота — высота ограничительной рамки фильтра. По умолчанию 0.
7 filterRes — числа, представляющие области фильтра.
8 xlink: href — используется для ссылки на другой фильтр.

пример

testSVG.htm 

 <HTML>
    <title> SVG Filter </ title>
    <Тело>
   
       <h1> Пример фильтра SVG </ h1>
   
       <svg width = "800" height = "800">
      
          <DEFS>
             <filter id = "filter1" x = "0" y = "0">
                <feGaussianBlur in = "SourceGraphic" stdDeviation = "8" />
             </ Фильтр>
            
             <filter id = "filter2" x = "0" y = "0" width = "200%" height = "200%">
                <feOffset result = "offOut" in = "SourceAlpha" dx = "20" dy = "20" />
                <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "10" />
                <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" />
             </ Фильтр>
          </ DEFS>
         
          <Г>
             <text x = "30" y = "50"> Использование фильтров (эффект размытия): </ text>
             <rect x = "100" y = "100" width = "90" height = "90" stroke = "green" stroke-width = "3"
             fill = "green" filter = "url (# filter1)" />      
          </ Г> 
         
       </ SVG>
   
    </ Body>
 </ Html>

  • Два элемента <filter> определены как filter1 и filter2.

  • Эффект фильтра feGaussianBlur определяет эффект размытия в зависимости от степени размытия с использованием stdDeviation.

  • in = «SourceGraphic» определяет, что эффект применим ко всему элементу.

  • Эффект фильтра feOffset используется для создания эффекта тени. in = «SourceAlpha» определяет, что эффект применим для альфа-части графики RGBA.

  • Элементы <rect> связывают фильтры, используя атрибут filter.

Два элемента <filter> определены как filter1 и filter2.

Эффект фильтра feGaussianBlur определяет эффект размытия в зависимости от степени размытия с использованием stdDeviation.

in = «SourceGraphic» определяет, что эффект применим ко всему элементу.

Эффект фильтра feOffset используется для создания эффекта тени. in = «SourceAlpha» определяет, что эффект применим для альфа-части графики RGBA.

Элементы <rect> связывают фильтры, используя атрибут filter.

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

Фильтр с эффектом тени 

 <HTML>
    <title> SVG Filter </ title>
    <Тело>
      
       <h1> Пример фильтра SVG </ h1>
      
       <svg width = "800" height = "800">
      
          <DEFS>
             <filter id = "filter1" x = "0" y = "0">
                <feGaussianBlur in = "SourceGraphic" stdDeviation = "8" />
             </ Фильтр>
            
             <filter id = "filter2" x = "0" y = "0" width = "200%" height = "200%">
                <feOffset result = "offOut" in = "SourceAlpha" dx = "20" dy = "20" />
                <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "10" />
                <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" />
             </ Фильтр>
          </ DEFS>
         
          <Г>
             <text x = "30" y = "50"> Использование фильтров (эффект тени): </ text>
             <rect x = "100" y = "100" width = "90" height = "90" stroke = "green" stroke-width = "3"
             fill = "green" filter = "url (# filter2)" />
          </ Г>
         
       </ SVG>
   
    </ Body>
 </ Html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

SVG — Узоры

SVG использует элемент <pattern> для определения шаблонов. Шаблоны определяются с использованием элемента <pattern> и используются для заполнения графических элементов мозаичным способом.

декларация

Ниже приводится объявление синтаксиса элемента <pattern> . Мы показали только основные атрибуты. 

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

Атрибуты

Sr.No. Имя и описание
1 patternUnits — единицы для определения области действия паттернов. Он определяет систему координат для различных значений длины в шаблоне и для атрибутов, определяющих субрегион шаблона. Если patternUnits = «userSpaceOnUse», значения представляют значения в текущей пользовательской системе координат на месте во время использования элемента ‘pattern’. Если patternUnits = «objectBoundingBox», значения представляют значения в долях или процентах от ограничительной рамки для ссылочного элемента на месте в момент использования элемента ‘pattern’. По умолчанию используется userSpaceOnUse.
2 patternContentUnits — единицы измерения области содержимого шаблона. Он определяет систему координат для различных значений длины в шаблоне и для атрибутов, определяющих субрегион шаблона. Если patternContentUnits = «userSpaceOnUse», значения представляют значения в текущей пользовательской системе координат на месте во время использования элемента ‘pattern’. Если patternContentUnits = «objectBoundingBox», значения представляют значения в долях или процентах от ограничительной рамки на ссылочном элементе на месте во время использования элемента ‘pattern’. По умолчанию используется userSpaceOnUse.
3 x — координата оси x ограничительной рамки шаблона. По умолчанию 0.
4 y — координата оси y рамки, ограничивающей шаблон. По умолчанию 0.
5 ширина — ширина ограничительной рамки рисунка. По умолчанию 0.
6 высота — высота ограничительной рамки рисунка. По умолчанию 0.
7 preserveAspectRatio — сохранить соотношение ширины / высоты исходного содержимого.
8 xlink: href — используется для ссылки на другой шаблон.

пример

testSVG.htm 

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>
      
      <svg width="800" height="800">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

  • Один элемент <pattern> определен как pattern1.

  • В шаблоне определяется окно просмотра и определяется путь, который должен использоваться в качестве шаблона.

  • в элементе rect, в атрибуте fill, указывается URL шаблона, чтобы заполнить прямоугольник шаблоном, созданным ранее.

Один элемент <pattern> определен как pattern1.

В шаблоне определяется окно просмотра и определяется путь, который должен использоваться в качестве шаблона.

в элементе rect, в атрибуте fill, указывается URL шаблона, чтобы заполнить прямоугольник шаблоном, созданным ранее.

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

SVG — Градиенты

Градиент — это плавный переход одного цвета в другой в пределах формы. SVG предоставляет два типа градиентов.

  • Линейные градиенты — представляет линейный переход одного цвета в другой из одного направления в другое.

  • Радиальные градиенты — представляет круговой переход одного цвета в другой из одного направления в другое.

Линейные градиенты — представляет линейный переход одного цвета в другой из одного направления в другое.

Радиальные градиенты — представляет круговой переход одного цвета в другой из одного направления в другое.

Линейные градиенты

декларация

Ниже приводится объявление синтаксиса элемента <linearGradient> . Мы показали только основные атрибуты. 

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

Атрибуты

Sr.No. Имя и описание
1 GradientUnits — единицы измерения для определения системы координат для различных значений длины в градиенте. Если градиентUnits = «userSpaceOnUse», значения представляют значения в текущей пользовательской системе координат на месте во время использования элемента градиента. Если patternContentUnits = «objectBoundingBox», значения представляют значения в долях или процентах от ограничительной рамки для ссылочного элемента на месте во время использования элемента градиента. По умолчанию используется userSpaceOnUse.
2 x1 — координата оси x вектора градиента. По умолчанию 0.
3 y1 — координата оси Y вектора градиента. По умолчанию 0.
4 x2 — координата оси x вектора градиента. По умолчанию 0.
5 y2 — координата оси Y вектора градиента. По умолчанию 0.
6 spreadMethod — указывает метод распространения градиента внутри графического элемента. По умолчанию это «pad».
7 xlink: href — используется для обозначения другого градиента.

пример

testSVG.htm 

<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

  • Один элемент <linearGradient> определен как sampleGradient.

  • В linearGradient два смещения определяются двумя цветами.

  • в элементе rect, в атрибуте fill, указывается URL градиента, чтобы заполнить прямоугольник градиентом, созданным ранее.

Один элемент <linearGradient> определен как sampleGradient.

В linearGradient два смещения определяются двумя цветами.

в элементе rect, в атрибуте fill, указывается URL градиента, чтобы заполнить прямоугольник градиентом, созданным ранее.

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

Радиальные градиенты

декларация

Ниже приводится объявление синтаксиса элемента <radialGradient> . Мы показали только основные атрибуты. 

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

Атрибуты

Sr.No. Имя и описание
1 GradientUnits — единицы измерения для определения системы координат для различных значений длины в градиенте. Если градиентUnits = «userSpaceOnUse», значения представляют значения в текущей пользовательской системе координат на месте во время использования элемента градиента. Если patternContentUnits = «objectBoundingBox», значения представляют значения в долях или процентах от ограничительной рамки для ссылочного элемента на месте во время использования элемента градиента. По умолчанию используется userSpaceOnUse.
2 cx — координата оси X центра наибольшего круга вектора градиента. По умолчанию 0.
3 ось cy — координата оси y центра наибольшего круга вектора градиента. По умолчанию 0.
4 r — радиус центра наибольшего круга вектора градиента. По умолчанию 0.
5 fx — фокус радиального градиента. По умолчанию 0.
6 fy — фокус радиального градиента. По умолчанию 0.
7 spreadMethod — указывает метод распространения градиента внутри графического элемента. По умолчанию это «pad».
8 xlink: href — используется для обозначения другого градиента.

пример

testSVG.htm 

<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

  • Один элемент <radialGradient> определен как sampleGradient.

  • В radialGradient два смещения определяются двумя цветами.

  • в элементе rect, в атрибуте fill, указывается URL градиента, чтобы заполнить прямоугольник градиентом, созданным ранее.

Один элемент <radialGradient> определен как sampleGradient.

В radialGradient два смещения определяются двумя цветами.

в элементе rect, в атрибуте fill, указывается URL градиента, чтобы заполнить прямоугольник градиентом, созданным ранее.

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

SVG — Интерактивность

Изображения SVG могут быть адаптированы к действиям пользователя. SVG поддерживает события указателя, события клавиатуры и события документа. Рассмотрим следующий пример.

пример

testSVG.htm 

<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

Explaination

  • SVG поддерживает функции JavaScript / ECMAScript. Блок сценария должен находиться в блоке CDATA, учитывая поддержку символьных данных в XML.

  • Элементы SVG поддерживают события мыши, события клавиатуры. Мы использовали событие onClick для вызова функций JavaScript.

  • В функциях javascript document представляет документ SVG и может использоваться для получения элементов SVG.

  • В функциях javascript событие представляет текущее событие и может быть использовано для получения целевого элемента, для которого возникло событие.

SVG поддерживает функции JavaScript / ECMAScript. Блок сценария должен находиться в блоке CDATA, учитывая поддержку символьных данных в XML.

Элементы SVG поддерживают события мыши, события клавиатуры. Мы использовали событие onClick для вызова функций JavaScript.

В функциях javascript document представляет документ SVG и может использоваться для получения элементов SVG.

В функциях javascript событие представляет текущее событие и может быть использовано для получения целевого элемента, для которого возникло событие.

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG. Нажмите на каждый текст и прямоугольник, чтобы увидеть результат.

SVG — Linking

Элемент <a> используется для создания гиперссылки. Атрибут «xlink: href» используется для передачи IRI (интернационализированных идентификаторов ресурсов), который дополняет URI (унифицированные идентификаторы ресурсов).

декларация

Ниже приводится объявление синтаксиса элемента <a> . Мы показали только основные атрибуты. 

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

Атрибуты

Sr.No. Имя и описание
1 xlink: show — в целях документации для процессоров, поддерживающих XLink. По умолчанию новый.
2 xlink: activate — в целях документации для процессоров, поддерживающих XLink.
3 xlink: href — местоположение ссылочного объекта.
4 target — используется, когда возможны цели для конечного ресурса.

пример

testSVG.htm 

<html>
   <title>SVG Linking</title>
   <body>
   
      <h1>Sample Link</h1>
      
      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.tutorialspoint.com"> 
               <text x="0" y="15" fill="black" >
               Click me to load TutorialsPoint DOT COM.</text>
            </a>
         </g> 
         
         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load TutorialsPoint DOT COM</text>
            
            <a xlink:href="http://www.tutorialspoint.com"> 
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> 
            </a>
         </g>
      </svg>
   
   </body>
</html>

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG. Нажмите на ссылку и прямоугольник, чтобы увидеть результат.

46
Share: