1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: SVG в HTML. Введение
slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
---
<h2 id="Overview">Описание</h2>
<p>Эта статья содержит пример использования SVG в качестве фонового изображения для формы. В примере демонстрируется, как JavaScript и CSS может быть использован для того, чтобы производить операции с векторным изображением (svg) так, будто вы используете обычный сценарий для XHTML. Необходимо понимать, что пример работоспособен лишь в браузерах, которые поддерживают XHTML (не HTML), а также интеграцию SVG.</p>
<h2 id="Source">Код</h2>
<p>Демонстрация примера <a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">здесь</a>:</p>
<pre class="brush: html"><html xmlns="http://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>Введите что-нибудь:</label>
<input type="text"/>
<span id="err">Incorrect value!</span></p>
<p><input type="button" value="Activate!" onclick="signalError();" /></p>
</fieldset>
</form>
<svg xmlns="http://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>
</pre>
<h2 id="Discussion">Примечание</h2>
<p>В примере представлен обычный XHTML, CSS и JavaScript-код. Здесь есть лишь одна особенность, это наличие SVG элемента. Этот элемент объявлен в специальном пространстве имён SVG, содержит градиент и две фигуры заполненные градиентом. По замыслу, когда пользователь введёт что-нибудь неправильное, то скрипт установит для BODY класс .invalid, где правила стиля изменяют цвет градиента и делают видимым сообщение об ошибке.</p>
<p>Такой способ имеет следующие пункты в свою пользу:</p>
<ul>
<li>Мы использовали штатную XHTML форму, которая уже может присутствовать на веб-сайте, и добавили привлекательный, интерактивный фон</li>
<li>Подход имеет обратную совместимость с браузерами, которые не поддерживают SVG; Элемент SVG просто не отобразится, не повлияв на текущую вёрстку.</li>
<li>Это очень просто сделать.</li>
<li>Изображение масштабируемое и может растягиваться до нужного размера</li>
<li>Мы можем применять декларированные стили как для HTML так и для SVG</li>
<li>С помощью JavaScript можно управлять как HTML так и SVG</li>
<li>Это полностью валидный документ, основанный на стандартах.</li>
</ul>
<div class="note">
<p>Чтобы к изображению с DOM добавить связь встроенного SVG, необходимо использовать setAttributeNS, установив href как показано в следующем примере:</p>
<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
</pre>
</div>
<h2 id="Details">Дополнительно</h2>
<p>Значение атрибута <code>viewBox</code> определяет область в пространстве пользователя, относительно внешним границам просмотра.</p>
<p><code>viewBox="x y w h" - где: x- левый верхний угол по оси x, y- левый верхний угол по оси y, w- ширина в пользовательской единице измерения, h- высота (соответственно). В данном примере использовалось значение:</code></p>
<pre class="brush: html"><code>viewBox="0 0 100 100" </code></pre>
<p>Размер изображения svg (заданный атрибутами width и height), может отличаться от области просмотра. Для регулирования отрисовки такого изображения используется атрибут <code>preserveAspectRatio. </code>С его помощью могут быть заданы правила выравнивания и поведения при переполнении (overflow) области просмотра, края svg могут быть обрезаны или вписаны.</p>
<pre class="brush: html"> preserveAspectRatio="alignment [meet | slice]"</pre>
<p><code>alignment </code>- одно из значений <code>xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid</code> или <code>xMaxYMax</code>.</p>
<p><code>meet </code>- сохраняет пропорции, умещая svg в область просмотра</p>
<p><code>slice </code>- тоже сохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместилась в область</p>
<p>Также есть спецификатор <code>none который означает, что изображение заполнит область путём масштабирования сторон, не сохраняя пропорции (растянет).</code></p>
<pre class="brush: html"> preserveAspectRatio="none"</pre>
<p>Атрибут <code>style </code>применяется для определения стиля элемента.</p>
<h2 id="Related_Links">Ссылки по теме</h2>
<ul>
<li>Сохранение пропорций <a href="http://xiper.net/learn/svg/svg-essentials/preserving-aspect-ratio">ссылка</a></li>
<li>Масштабирование и сдвиг <a href="https://msdn.microsoft.com/ru-ru/library/gg589508(v=vs.85).aspx">msdn.microsoft</a></li>
<li>Ещё SVG в XHTML: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">пример</a></li>
</ul>
<p> </p>
|
