initial commit

1 files changed, 191 insertions, 0 deletions

diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.html
new file mode 100644
index 0000000000..ed94188d1f
--- /dev/null
+++ b/files/ru/web/svg/attribute/viewbox/index.html
@@ -0,0 +1,191 @@
+---
+title: viewBox
+slug: Web/SVG/Attribute/viewBox
+tags:
+  - SVG
+translation_of: Web/SVG/Attribute/viewBox
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Аттрибут </span></font>viewBox</code> определяет расположение и размеры окна отображения SVG.</p>
+
+<p>Значение атрибута <code>viewBox</code> — это набор четырех чисел: <code>min-x</code>, <code>min-y</code>, <code>width</code> и <code>height</code>, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport">браузера</a>).</p>
+
+<div class="hidden">
+<pre class="notranslate">html, body, svg {
+  height:100%
+}
+
+svg:not(:root) {
+  display: inline-block;
+}</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  С относительными единицами, такими как проценты,
+  размер квадрата не меняется в зависимости от
+  значения viewBox
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  При больших значениях viewBox круг получается
+  маленьким, потому что его радиус указан в абсолютных
+  единицах: расстояние 4 получается маленьким относительно
+  размера окна 100, указанного во viewBox
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;
+
+&lt;svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Также не зависит от viewBox, как и в предыдущем примере --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  С маленьким значением размера viewBox круг получается
+  большим, потому что радиус 4 намного больше, если размер
+  области отображения равен 10, чем если он равен 100
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;
+
+&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  Точка с координатами (0, 0) теперь является центром области
+  отображения. 100% всё ещё приравнивается к полному размеру
+  области отображения (10 на 10), поэтому квадрат выглядит
+  сдвинутым в правый нижний угол
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  Так как точка (0, 0) находится в центре, а координаты круга,
+  равные 50%, относительно размера области отображения (10 на 10)
+  принимаются равными 5, круг оказывается с центром
+  в правом нижнем углу
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+
+<p>На отображение с <code>viewBox</code> также влияет атрибут {{ SVGAttr("preserveAspectRatio") }}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание: </strong>при значениях <code>width</code> и <code>height</code> меньших или равных <code>0</code> элемент не отображается</p>
+</div>
+
+<p><br>
+ Пять элементов используют этот атрибут: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }} и {{ SVGElement("view") }}.</p>
+
+<h2 id="marker">marker</h2>
+
+<p>Для элемента {{SVGElement('marker')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;marker&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="pattern">pattern</h2>
+
+<p>Для элемента {{SVGElement('pattern')}}, <code>viewBox</code> определеяет расположение и размеры содержимого шаблона.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="svg">svg</h2>
+
+<p>Для элемента {{SVGElement('svg')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;svg&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="symbol">symbol</h2>
+
+<p>Для элемента {{SVGElement('symbol')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;symbol&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="view">view</h2>
+
+<p>Для элемента {{SVGElement('view')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code>&lt;view&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Значение</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Значение по умолчанию</th>
+   <td><em>нет</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Анимируемое</th>
+   <td>Да</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li>
+</ul>