SVG в HTML. Введение

Описание

Эта статья содержит пример использования SVG в качестве фонового изображения для формы. В примере демонстрируется, как JavaScript и CSS может быть использован для того, чтобы производить операции с векторным изображением (svg), так, будто вы используете обычный сценарий для XHTML. Необходимо понимать, что пример работоспособен лишь в браузерах которые поддерживают XHTML (не HTML), а также интеграцию SVG.

Код

Демонстрация примера здесь:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>XTech SVG Demo</title>
<style>
  stop.begin { stop-color:yellow; }
  stop.end { stop-color:green; }
  body.invalid stop.end { stop-color:red; }
  #err { display:none; }
  body.invalid #err { display:inline; } 
</style>
<script>
  function signalError() {
    document.getElementById('body').setAttribute("class", "invalid");
  }
</script>
</head>
<body id="body"
  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
<form>
  <fieldset>
    <legend>HTML Form</legend>
    <p><label>Enter something:</label>
    <input type="text"/>
    <span id="err">Incorrect value!</span></p>
    <p><input type="button" value="Activate!" onclick="signalError();" /></p>
  </fieldset>
</form>

<svg xmlns="https://www.w3.org/2000/svg" version="1.1"
  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
  <linearGradient id="gradient">
    <stop class="begin" offset="0%"/>
    <stop class="end" offset="100%"/>
  </linearGradient>
  <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
  <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>
</body>
</html>

Примечание

В примере представлена обычный XHTML, CSS и JavaScript код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имен SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введет что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.

Такой способ имеет следующие пункты в свою пользу:

Мы использовали штатную XHTML форму, которая может уже может присутствовать на веб-сайте, и добавили привлекательный, интерактивный фон
Подход имеет обратную совместимость с браузерами, которые не поддерживают SVG; Элемент SVG просто не отобразится, не повлияв на текущую верстку.
Это очень просто сделать.
Изображение масштабируемое и может растягиваться до нужного размера
Мы может применять декларированныестили как для HTML так и для SVG
С помощью JavaScript можно управлять как HTML так и SVG
Это полностью валидный документ, основанный на стандартах.

Чтобы добавить связать изображение с DOM встроенного SVG, необходимо использовать setAttributeNS, установив href как показано в следующем примере:

 var img = document.createElementNS("https://www.w3.org/2000/svg", "image");

img.setAttributeNS("https://www.w3.org/1999/xlink", "xlink:href", "move.png");

Дополнительно

Значение атрибута viewBox определяет область в пространстве пользователя, относительно внешним границам просмотра.

viewBox="x y w h" - где: x- левый верхний угол по оси x, y- левый верхний угол по оси y, w- ширина в пользовательской единице измерения, h- высота (соответственно). В данном примере использовалось значение:

viewBox="0 0 100 100"

Размер изображения svg (заданный атрибутами width и height), может отличаться от области просмотра. Для регулирования отображения такого изображения используется атрибут preserveAspectRatio. С помощью него может быть заданы правила выравнивания и поведения при переполнении (overflow) области просмотра, края svg могут быть обрезаны или вписаны.

 preserveAspectRatio="alignment [meet | slice]"

alignment - одно из значений xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid или xMaxYMax.

meet - сохраняет пропорции, умещая svg в область просмотра

slice - cохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместиласть в область

Также есть спецификатор none который означает, что изображение заполнит область путем масштабирования сторон, не сохраняя пропорции (растянет).

 preserveAspectRatio="none"

Атрибут style применяется для определения стиля элемента.

Ссылки по теме

Сохранение пропорций ссылка
Масштабирование и сдвиг msdn.microsoft
Еще SVG в XHTML: пример

SVG в HTML. Введение

Описание

Код

Примечание

Дополнительно

Ссылки по теме

Метки документа и участники