JavaScript. Подробное руководство, 6-е издание, стр. 352

 <circle cx="5" cy="5" r="5" fill="blue"/>

 </svg>

 </body>

</html>

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

Так как формат SVG - это грамматика языка XML, рисование SVG-изображений заключается просто в использовании модели DOM для создания соответствующих XML-элементов. В примере 21.2 приводится реализация функции

pieChart(),

которая создает SVG-элементы для воспроизведения круговой диаграммы, подобной той, что показана на рис. 21.3.

JavaScript. Подробное руководство, 6-е издание - i_054.jpg

Рис. 21.3. Круговая диаграмма в формате SVG, построенная JavaScript-сценарием

Пример 21.2. Рисование круговой диаграммы средствами JavaScript и SVG

/* *

* Создает элемент <svg> и рисует в нем круговую диаграмму.

* Аргументы:

<b>* data: массив чисел для диаграммы, по одному для каждого сектора.</b>

* width,height: размеры SVG-изображения в пикселах

* сх, су, г: координаты центра и радиус круга

<b>* colors: массив цветов в формате HTML, по одному для каждого сектора</b>

* labels: массив меток для легенды, по одной для каждого сектора

* 1х, 1у: координаты левого верхнего угла легенды диаграммы

* Возвращает:

* Элемент <svg>, хранящий круговую диаграмму.

<b>* Вызывающая программа должна вставить возвращаемый элемент в документ.</b>

*/

function pieChart(data, width, height, cx, су, r, colors, labels, lx, ly) {

 // Пространство имен XML для элементов svg 

 var svgns = "<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>";

<b>  // Создать элемент &lt;svg&gt;, указать размеры в пикселах и координаты</b>

 var chart = document.createElementNS(svgns, "svg:svg");

 chart.setAttribute("width", width);

 chart.setAttribute("height", height);

 chart.setAttribute("viewBox", "0 0 ” + width + " " + height);

<b>  // Сложить вместе все значения, чтобы получить общую сумму всей диаграммы</b>

 var total = 0;

 for(var і = 0; і < data.length; і++) total += data[і];

<b>  // Определить величину каждого сектора. Углы измеряются в радианах,</b>

 var angles = []

 for(var і = 0; і < data.length; і++) angles[i] = data[i]/total*Math.PI*2;

 // Цикл по всем секторам диаграммы,

 startangle = 0;

 for(var і = 0; і < data.length; i++) {

 // Точка, где заканчивается сектор

 var endangle = startangle + angles[i];

<b>    // Вычислить координаты точек пересечения радиусов, образующих сектор,</b>

<b>    // с окружностью. В соответствии с выбранными формулами углу 0 радиан</b>

 // соответствует точка в самой верхней части окружности,

<b>    // а положительные значения откладываются от нее по часовой стрелке.</b>

 var х1 = сх + r * Math.sin(startangle);

 var y1 = су - r * Math.cos(startangle);

 var x2 = cx + r * Math.sin(endangle);

 var y2 = су - r * Math.cos(endangle);

 // Это флаг для углов, больших половины окружности.

 // Он необходим SVG-механизму рисования дуг

 var big = 0;

 if (endangle - startangle > Math.PI) big = 1;

 // Мы описываем сектор с помощью элемента <svg:path>.

 // Обратите внимание, что он создается вызовом createElementNS()

 var path = document.createElementNS(svgns, "path");

<b>    // Эта строка хранит информацию о контуре, образующем сектор</b>

 var d = "М " + сх + + су + // Начало в центре окружности

<b>      &quot; L &quot; + х1 + &quot;,&quot; + у1 +  // Нарисовать линию к точке (х1,у1)</b>

<b>      &quot; А &quot; + r + &quot;,&quot; + r +    // Нарисовать дугу с радиусом r</b>

 " 0 " + big + " 1 " + // Информация о дуге...