files/ru/web/svg/attribute/overflow/index.html


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

---
title: overflow
slug: Web/SVG/Attribute/overflow
tags:
  - SVG
  - SVG атрибуты
translation_of: Web/SVG/Attribute/overflow
---
<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>

<p>Атрибут <code>overflow</code> имеет те же значения, что определены для {{ cssxref("overflow","CSS-свойства overflow") }}. Но имеют место также следующие дополнительные моменты:</p>

<ul>
 <li>Атрибут <code>overflow</code> применяется к элементам, которые устанавливают новый порт просмотра (см. ниже), элементам{{ SVGElement("pattern") }} и {{ SVGElement("marker") }}, на все прочие элементы он не влияет.</li>
 <li>Для элементов, к которым атрибут <code>overflow</code> может применяться, если он имеет значение <code>hidden</code> или <code>scroll</code>, результатом будет создание нового пути обрезки прямоугольной формы. Это эквивалентно определению элемента {{ SVGElement("clipPath") }}, содержимое которого есть элемент {{ SVGElement("rect") }}, который определяет эквивалентный прямоугольник, и затем указанию &lt;url&gt; этого элемента {{ SVGElement("clipPath") }} равным значению атрибута {{ SVGAttr("clip-path") }} для данного элемента.</li>
 <li>Если атрибут <code>overflow</code> имеет значение, отличное от <code>hidden</code> или <code>scroll</code>, он не оказывает действия.</li>
 <li>Внутри SVG-содержимого значение <code>auto</code> эквивалентно значению <code>visible</code>.</li>
 <li>Когда svg-элемент высшего уровня включён в HTML-код, если атрибут <code>overflow</code> имеет значение <code>hidden</code> или <code>scroll</code>, браузер установит первоначальный путь обрезки равным границам первоначального порта просмотра; иначе первоначальный порт просмотра задаётся соответственно CSS-правилам обрезки.</li>
 <li>Когда svg-элемент высшего уровня автономен, атрибут <code>overflow</code> на нём игнорируется в том, что касается отрисовки, а первоначальный путь обрезки устанавливается по границам первоначального порта просмотра.</li>
 <li>Первоначальное значение <code>overflow</code>, как определено в CSS, есть <code>visible</code>, и это применяется также к корневому элементу {{ SVGElement("svg") }}; но для дочерних элементов SVG-документа браузерные стили SVG перекрывают это первоначальное значение и задают атрибуту <code>overflow</code> элементов, устанавливающих новый порт просмотра, элементов <code>pattern</code> и <code>marker</code> значение <code>hidden</code>.</li>
</ul>

<p>Будучи презентационным этот атрибут может также быть использован как свойство прямо в CSS-стилях, подробнее см. {{ cssxref("overflow","CSS overflow") }}.</p>

<h2 id="Контекст_использования">Контекст использования</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Категории</th>
   <td>Презентационный атрибут</td>
  </tr>
  <tr>
   <th scope="row">Значение</th>
   <td>visible | hidden | scroll | auto | inherit</td>
  </tr>
  <tr>
   <th scope="row">Анимируемый</th>
   <td>Да</td>
  </tr>
  <tr>
   <th scope="row">Нормативный документ</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Пример">Пример</h2>

<h2 id="Элементы">Элементы</h2>

<p>Следующие элементы могут использовать атрибут <code>overflow</code></p>

<ul>
 <li>{{ SVGElement("svg") }}</li>
 <li>{{ SVGElement("symbol") }}</li>
 <li>{{ SVGElement("image") }}</li>
 <li>{{ SVGElement("foreignObject") }}</li>
 <li>{{ SVGElement("pattern") }}</li>
 <li>{{ SVGElement("marker") }}</li>
</ul>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{ cssxref("overflow","CSS overflow") }}</li>
</ul>