Введение в SVG: выполнение декора

Создание с помощью сценария ландшафта из компонентов SVG, выбранных из библиотеки.

1) Создать библиотеку шаблонов

Сначала рассмотрим тот случай, когда библиотека находится на странице. Она сбывается с тегом svg, содержащим несколько фигур, в нашей демонстрации - прямоугольник и круг.

<svg id="repository">
  <rect id="rect" width="200" height="100" style="fill:rgb(100,150,200);" />
  <circle id="circle" cx="300" cy="80" r="60" style="fill:rgb(0,160,0);";/>
</svg>

Библиотека фигур

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

var cir = document.createElementNS("http://www.w3.org/2000/svg", "circle");
cir.setAttribute("cx", 40);
cir.setAttribute("cy", 60);
cir.setAttribute("r", 35);
cir.setAttribute("fill", "red");

Другое решение - использовать изображения, хранящиеся в SVG-файлах, которые будут генерироваться таким ПО, как Inkscape или SVG-Edit.

Изображение SVG можно интегрировать несколькими способами. Например, с атрибутом xlink изображения:

<svg width="96" height="96">
  <image xlink:href="code/boat.svg" src="code/boat.png" width="100" height="100"/>
</svg>

Преимущество этого метода, который включает в тег svg тег изображения, заключается в том, что можно отобразить заменяющее растровое изображение, если браузер слишком стар для поддержки SVG. Как использовать этот тег, мы увидим в статье SVG: Автомобиль на дороге и расписание событий. Второй метод - использование тега object .

<object width="100" height="100" data="code/plane.svg"></object>
<object width="100" height="100" data="code/boat.svg"></object>
<object width="100" height="100" data="code/building.svg"></object>

Библиотека файлов

Это идеально подходит для загрузки SVG-изображений в страницу и их отображения. Мы все еще можем использовать третий метод - iframes:

<div style="display:none">
<iframe id="iplane" width="100" height="100" src="code/plane.svg"></iframe>
<iframe id="iboat" width="100" height="100" src="code/boat.svg"></iframe>
<iframe id="ibuilding" width="100" height="100" src="code/building.svg"></iframe>
</div>

В теге object размер изображения меняется, что не является флажком для iframe. IFRAMES помещаются в слой, который не отображается, потому что ты хочешь использовать только их содержимое, а не показывать его, поэтому здесь это не важно.

Использовать содержимое iframes или object очень просто, как мы увидим.

2) Создание композиции

Мы создаем поверхность, как мы делаем для Canvas, но контейнер здесь - это тег svg:

<svg class="surface" id="surface"></svg>

Компоненты вставляются с помощью метода appendChild DOM:

var surface = document.getElementById("surface");

var rect = document.getElementById("rect");
var clonerect = rect.cloneNode();
clonerect.setAttribute("x", 100);
clonerect.setAttribute("y", 200);
surface.appendChild(clonerect);

var circle = document.getElementById("circle");
var clonecir = circle.cloneNode();
surface.appendChild(clonecir);

Создается клон обеих фигур, чтобы она не исчезла в галерее выше, так как appendChild иначе переместит тег в DOM из галереи на тег svg.

Также динамически добавляемая фигура:

surface.appendChild(cir);

Это дает следующую композицию:

Теперь мы создадим композицию из объекта, хранящегося в файлах svg. Создается новая поверхность, ID которой - «город»:

<svg class="surface" id="city"></svg>

Функция getSVG предназначена для извлечения содержимого файла после загрузки в iframe.

function getSVG(iframeID, objID)
{
  var ifr = document.getElementById(iframeID);
  var graphics = ifr.contentWindow || ifr.contentDocument;
  return graphics.document.getElementById(objID);
}

Аргументы - это идентификатор iframe, в который загружается файл, и идентификатор содержимого в файле svg. Файл содержит тег <g> с идентификатором для идентификации содержимого, которое нужно вставить в нашу поверхность, например:

<g id="boat"> ... </g>

Важно показывать содержимое svg после полной загрузки страницы, а также использовать свойство onload в окне.

Перед включением компонентов они имеют цвет и положение на поверхности. Поскольку тег <g> не имеет атрибутов x и y, вместо него используется свойство translate.

function displaySVG() 
{   
  var city = document.getElementById("city");
  var building = getSVG("ibuilding", "building");
  building.setAttribute("transform", "translate(360,126)");
  building.setAttribute("fill", "#ccc");	
  city.appendChild(building);

  var boat = getSVG("iboat", "boat");
  boat.setAttribute("fill", "#090");	
  boat.setAttribute("transform", "translate(10,247)");	
  city.appendChild(boat);

  var plane = getSVG("iplane", "plane");
  plane.setAttribute("fill", "blue");	
  plane.setAttribute("width", "120");	
  plane.setAttribute("height", "50");	
  plane.setAttribute("transform", "translate(60,30)");	
  city.appendChild(plane);	
}
window.onload=displaySVG;

Вот итоговая таблица:

Можно идти дальше, добавлять анимации, позволять пользователю взаимодействовать с таблицей, в этом преимущество формата svg... это будет предметом последующих статей... Демонстрация разбиения использует принципы, описанные на этой странице.