Учебники

D3.js – Введение в SVG

SVG расшифровывается как Scalable Vector Graphics . SVG – это формат векторной графики на основе XML. Он предоставляет возможность рисовать различные формы, такие как линии, прямоугольники, круги, эллипсы и т. Д. Следовательно, проектирование визуализаций с помощью SVG дает вам больше возможностей и гибкости.

Особенности SVG

Некоторые из характерных особенностей SVG следующие:

  • SVG – векторный формат изображения, основанный на тексте.
  • SVG похожа по структуре на HTML.
  • SVG может быть представлен как объектная модель Document .
  • Свойства SVG могут быть указаны как атрибуты.
  • SVG должен иметь абсолютные позиции относительно начала координат (0, 0).
  • SVG может быть включен как есть в HTML-документе.

Минимальный пример

Давайте создадим минимальное изображение SVG и включим его в документ HTML.

Шаг 1 – Создайте изображение SVG и установите ширину 300 пикселей и высоту 300 пикселей.

<svg width = "300" height = "300">

</svg>

Здесь тег svg запускает изображение SVG и имеет ширину и высоту в качестве атрибутов. Единицей формата SVG по умолчанию является пиксель .

Шаг 2 – Создайте линию, начинающуюся с (100, 100) и заканчивающуюся (200, 100), и установите красный цвет для линии.

<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" 
   style = "stroke:rgb(255,0,0);stroke-width:2"/>

Здесь тэг line рисует линию, а ее атрибуты x1, y1 относятся к начальной точке, а x2, y2 – к конечной точке. Атрибут style устанавливает цвет и толщину линии, используя стили обводки и ширины обводки .

  • x1 – это x-координата первой точки.

  • y1 – это y-координата первой точки.

  • x2 – это x-координата второй точки.

  • y2 – это y-координата второй точки.

  • штрих – цвет линии.

  • штрих-ширина – толщина линии.

x1 – это x-координата первой точки.

y1 – это y-координата первой точки.

x2 – это x-координата второй точки.

y2 – это y-координата второй точки.

штрих – цвет линии.

штрих-ширина – толщина линии.

Шаг 3 – Создайте HTML-документ «svg_line.html» и интегрируйте вышеуказанный SVG, как показано ниже –

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <line x1 = "100" y1 = "100" 
               x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
               stroke-width:2"/>
         </svg>
      </div>
      <p></p>
      <p></p>
   </body>
</html>

Вышеуказанная программа даст следующий результат.