Создание графики в формате SVG с помощью Dart и библиотеки dart:html

Язык разметки SVG (Scalable Vector Graphics, или масштабируемая векторная графика) предназначен для описания двумерной векторной и растровой графики в формате XML. Изображения в формате SVG легко интегрируются в HTML документы, и поддерживаются всеми современными браузерами, а кроме этого, браузеры позволяют динамически создавать и изменять такие изображения, с помощью тэга <svg>. Язык Dart в этом отношение не исключение, используя базовую библиотеку dart:html для работы с DOM моделью документа, мы можем оперировать svg-графикой.

Создание новых изображений на странице

Для внедрения нового графического элемента на страницу необходимо создать тэг <svg>, это можно сделать с использованием конструктора SVGElement.tag:

// создаем новый тэг <svg> с помощью объекта SVGElement
var svg = new SVGElement.tag("svg");
// указываем высоту и ширину тэга
svg.attributes = {
   "height": 320,
   "width": 240,
   "version": "1.1"
};

// добавляем созданный тэг в нужное место документа
document.query("#svgContainer").nodes.add(svg);

Добавление простых графических элементов

Чтобы добавить требуемые графические элементы к изображению достаточно просто создать эти элементы с использованием объекта SVGElementи добавить их в качестве подчиненых узлов к объекту, представляющему изображение:

// создадим окружность с помощью svg-тега <circle>
var circleTag = new SVGElement.tag("circle");
// установим положение, размер, стиль заливки и т.д. для окружности
circleTag.attributes = {
  "cx": 160, // X координата центра
  "cy": 120, // Y координата центра
  "r": 50, // радиус окружности
  "stroke": "blue", // цвет обрамляющей линии
  "stroke-width": "2", // ширина обрамляющей линии
  "fill": "green", // цвет заливка
  "fill-opacity": "0.5" // прозрачность заливки
};

// добавляем созданную окружность к изображению
svg.nodes.add(circleTag);

Кроме этого, существует еще один способ создания svg элементов - это использование конструктора SVGElement.svg - который создает теги непосредственно из фрагмента svg кода:

// создадим окружность с помощью svg-разметки
circleSvg = new SVGElement.svg('');
// добавляем созданную окружность к изображению
svg.nodes.add(circleSvg);

Пример:

#import('dart:html');

class testSVG {
  void run() {
    var svg = new SVGElement.tag("svg");    
    svg.attributes = {
      "height": 320,
      "width": 240,
      "version": "1.1"
    };
        
    document.query("#svgContainer").nodes.add(svg);

        
    var circleTag = new SVGElement.tag("circle");
    circleTag.attributes = {
      "cx": 160,
      "cy": 120,
      "r": 50,
      "stroke": "blue",
      "stroke-width": "2",
      "fill": "green",
      "fill-opacity": "0.5"
    };    
    svg.nodes.add(circleTag);
    
    
    var circleSvg = new SVGElement.svg('');
    svg.nodes.add(circleSvg);
  }
}

void main() {
  new testSVG().run();
}

Посмотреть результат