diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/svg | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/web/svg')
86 files changed, 10625 insertions, 0 deletions
diff --git a/files/ru/web/svg/applying_svg_effects_to_html_content/index.html b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..db88faea3f --- /dev/null +++ b/files/ru/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,234 @@ +--- +title: Применение эффектов SVG к содержимому HTML +slug: Web/SVG/Applying_SVG_effects_to_HTML_content +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +<p>Современные браузеры поддерживают <a href="/en-US/docs/SVG">SVG</a> в стилях <a href="/en-US/docs/Web/CSS" title="Cascading Style Sheets">CSS</a> для применения графических эффектов к HTML-контенту.</p> + +<p>Вы можете указать SVG в стилях как внутри одного документа, так и из внешней таблицы стилей. Есть 3 свойства, которые вы можете использовать: <a href="/en-US/docs/Web/CSS/mask"><code>mask</code></a>, <a href="/en-US/docs/Web/CSS/clip-path"><code>clip-path</code></a>, и <a href="/en-US/docs/Web/CSS/filter"><code>filter</code></a>. </p> + +<div class="note"><strong>Примечание:</strong> Ссылки на SVG во внешних файлах должны быть в том же самом источнике <a href="/en-US/docs/Web/Security/Same-origin_policy">same origin</a> , что и ссылочный документ.</div> + +<h2 id="Использование_встроенного_SVG">Использование встроенного SVG</h2> + +<p>Чтобы применить эффект SVG с использованием стилей CSS, вам нужно сначала создать стиль CSS, который ссылается на SVG. </p> + +<pre class="brush: html"><style>p { mask: url(#my-mask); }</style> +</pre> + +<p>В приведенном выше примере все параграфы маскируются с помощью <a href="/en-US/docs/Web/SVG/Element/mask">SVG</a> <a href="/en-US/docs/Web/SVG/Element/mask"><code><mask></code></a> с <a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a> <code>my-mask</code>. </p> + +<h3 id="Пример_маскировка">Пример: маскировка</h3> + +<p>Например, вы можете сделать градиентную маску для содержимого HTML, используя код SVG и CSS, похожий на следующий, внутри вашего документа HTML:</p> + +<pre class="brush: html"><svg height="0"> + <mask id="mask-1"> + <linearGradient id="gradient-1" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> + </mask> +</svg> +</pre> + +<pre class="brush: css">.target { + mask: url(#mask-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</pre> + +<p>Обратите внимание, что в CSS маска указана с использованием URL-адреса ID- <code>#mask-1</code>, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.</p> + +<p>Применение SVG-эффекта к (X) HTML выполняется путем назначения <code>target</code> классу, определенному выше элементу, например:</p> + +<pre class="brush: html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> +</pre> + +<p>Вышеприведенный пример будет отображаться с помощью маски, применяемой к нему.</p> + +<p>{{EmbedLiveSample('Example_Masking', 650, 200)}}</p> + +<h3 id="Пример_обрезание">Пример: обрезание</h3> + +<p>Этот пример демонстрирует использование SVG для клипа содержимого HTML. Обратите внимание, что даже кликаемые области для ссылок обрезаются.</p> + +<pre class="brush: html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> + +<button onclick="toggleRadius()">Toggle radius</button> + +<svg height="0"> + <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> + <rect x="0.5" y="0.2" width="0.5" height="0.8"/> + </clipPath> +</svg> +</pre> + +<pre class="brush: css">.target { + clip-path: url(#clipping-path-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</pre> + +<p>Это устанавливает область отсечения, образованную из круга и прямоугольника, присваивает ему ID <code>#clipping-path-1</code>, а затем ссылается на него в CSS. Путь клипа может быть назначен любому элементу с <code>target</code> классом.</p> + +<p>Вы можете вносить изменения в SVG в реальном времени, и они сразу же повлияют на рендеринг HTML. Например, вы можете изменить размер круга в указанном выше пути клипа:</p> + +<pre class="brush: js">function toggleRadius() { + var circle = document.getElementById("circle"); + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; +} +</pre> + +<p>{{EmbedLiveSample('Example_Clipping', 650, 200)}}</p> + +<h3 id="Пример_Фильтрация">Пример: Фильтрация</h3> + +<p>Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трем элементам как в нормальном состоянии, так и при <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover">hover</a> мыши.</p> + +<pre class="brush: html"><p class="target" style="background: lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<pre class="target">lorem</pre> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> +</pre> + +<p>Любой SVG-фильтр может применяться таким образом. Например, чтобы применить эффект размытия, вы можете использовать:</p> + +<pre class="brush: html"><svg height="0"> + <filter id="f1"> + <feGaussianBlur stdDeviation="3"/> + </filter> +</svg></pre> + +<p>Вы также можете применить цветовую матрицу:</p> + +<pre class="brush: html"><svg height="0"> + <filter id="f2"> + <feColorMatrix values="0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0 0 0 1 0"/> + </filter> +</svg> +</pre> + +<p>И ещё несколько фильтров:</p> + +<pre class="brush: html"><span><svg height="0"> +</span> <filter id="f3"> + <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> + </filter> + <filter id="f4"> + <feSpecularLighting surfaceScale="5" specularConstant="1" + specularExponent="10" lighting-color="white"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + </filter> + <filter id="f5"> + <feColorMatrix values="1 0 0 0 0 + 0 1 0 0 0 + 0 0 1 0 0 + 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> + </filter> +<span></svg></span></pre> + +<p>Пять фильтров применяются с использованием следующего CSS:</p> + +<pre class="brush: css">p.target { filter:url(#f3); } +p.target:hover { filter:url(#f5); } +b.target { filter:url(#f1); } +b.target:hover { filter:url(#f4); } +pre.target { filter:url(#f2); } +pre.target:hover { filter:url(#f3); } +</pre> + +<p>{{EmbedLiveSample('Example_Filtering', 650, 200)}}</p> + +<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p> + +<h3 id="Пример_размытый_текст">Пример: размытый текст</h3> + +<p>Чтобы размыть текст, браузеры, основанные на Webkit, имеют (префиксный) CSS-фильтр, называемый blur (см. Также <a href="/en-US/docs/Web/CSS/filter#blur%28%29_2">CSS filter</a>). Вы можете добиться такого же эффекта, используя фильтры SVG.</p> + +<pre class="brush: html"><p class="blur">Time to clean my glasses</p> +<svg height="0"> + <defs> + <filter id="wherearemyglasses" x="0" y="0"> + <feGaussianBlur in="SourceGraphic" stdDeviation="1"/> + </filter> + </defs> +</svg> +</pre> + +<p>Вы можете применить SVG и CSS-фильтр в том же классе:</p> + +<pre class="brush: css">.blur { filter: url(#wherearemyglasses); }</pre> + +<p>{{ EmbedLiveSample('Example_Blurred_Text', 300, 100) }}</p> + +<p>Размытие является сложным вычислением, поэтому используйте его экономно, особенно в элементах, которые прокручиваются или анимируются.</p> + +<h3 id="Пример_текстовые_эффекты">Пример: текстовые эффекты</h3> + +<p>Эффекты SVG также могут использоваться для большей динамики и гибкого подхода к добавлению текста по сравнению с простым текстом HTML.</p> + +<p>Создавая текст с использованием элементов SVG в сочетании с HTML, достигаются различные текстовые эффекты. Можно повернуть текст:</p> + +<pre class="brush: html"><svg height="60" width="200"> + <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">Пример текста</text> +</svg> +</pre> + +<h2 id="Использование_внешних_ссылок">Использование внешних ссылок</h2> + +<p>SVG, используемый для отсечения, маскировки и фильтрации, может быть загружен из внешнего источника, если этот источник исходит из того же источника, что и документ HTML, к которому он применяется.</p> + +<p>For example, if your CSS is in a file namedit can look like this: <br> + Например, если ваш CSS находится в файле с именем <code>default.css</code>, он может выглядеть следующим образом:</p> + +<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre> + +<p>Затем SVG импортируется из файла с именем <code>resources.svg</code>, используя путь клипа с ID <code>c1</code>. </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li> + <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">Эффекты SVG для HTML-контента</a> (запись в блоге)</li> + <li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (запись в блоге) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog »Архив блога» Ссылки на внешние документы SVG</a>) </li> +</ul> diff --git a/files/ru/web/svg/attribute/additive/index.html b/files/ru/web/svg/attribute/additive/index.html new file mode 100644 index 0000000000..0e5666b2b5 --- /dev/null +++ b/files/ru/web/svg/attribute/additive/index.html @@ -0,0 +1,56 @@ +--- +title: additive +slug: Web/SVG/Attribute/additive +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/additive +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Этот атрибут определяет, является ли анимация аддитивной.</p> + +<p>Часто бывает полезно определить анимацию как смещение или Дельта для значения атрибута, а не как абсолютные значения. Этот атрибут указывает на анимацию, если их значения добавляются к исходному значению анимированного атрибута.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>Атрибут добавления анимации</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><strong title="this is the default value">replace</strong> | sum</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/SVG/animate.html#AdditionAttributes" title="http://www.w3.org/TR/SVG/animate.html#AdditionAttributes">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>sum</dt> + <dd>Указывает, что анимация добавляется к базовому значению атрибута и других анимаций с меньшим приоритетом.</dd> + <dt>replace</dt> + <dd>Указывает, что анимация переопределит базовое значение атрибута и другие анимации с меньшим приоритетом. Это значение по умолчанию, однако на поведение также влияют атрибуты значений анимации {{ SVGAttr("by") }} и {{ SVGAttr("to") }}, как описано в <a class="external" href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive" title="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive">SMIL Animation: How from, to and by attributes affect additive behavior</a>.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>additive</code></p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/attributename/index.html b/files/ru/web/svg/attribute/attributename/index.html new file mode 100644 index 0000000000..8a114bc8b2 --- /dev/null +++ b/files/ru/web/svg/attribute/attributename/index.html @@ -0,0 +1,85 @@ +--- +title: attributeName +slug: Web/SVG/Attribute/attributeName +tags: + - NeedsCompatTable + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/attributeName +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <code><strong>attributeName</strong></code> задаёт имя свойства CSS или атрибута целевого элемента, которое будет изменено во время анимации.</p> + +<p>Четыре элемента используют данный артибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> + <rect x="50" y="50" width="100" height="100"> + <animate attributeType="XML" attributeName="y" from="0" to="50" + dur="5s" repeatCount="indefinite"/> + </rect> +</svg></pre> + +<p>{{EmbedLiveSample("topExample", "400", "250")}}</p> +</div> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code><name></code></td> + </tr> + <tr> + <th scope="row">Значение по-умолчанию</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><name></code></dt> + <dd>Это значение задаёт имя свойства CSS или атрибута целевого элемента, которое будет анимировано.</dd> +</dl> + +<h2 id="Спецификиции">Спецификиции</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#AttributeNameAttribute", "attributeName")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#AttributeNameAttribute", "attributeName")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute">SMIL Animation specification</a></li> +</ul> diff --git a/files/ru/web/svg/attribute/attributetype/index.html b/files/ru/web/svg/attribute/attributetype/index.html new file mode 100644 index 0000000000..64578f28b0 --- /dev/null +++ b/files/ru/web/svg/attribute/attributetype/index.html @@ -0,0 +1,59 @@ +--- +title: attributeType +slug: Web/SVG/Attribute/attributeType +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/attributeType +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Этот атрибут задает пространство имен, в котором определяются конечный атрибут и связанные с ним значения.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Целевые атрибуты анимации</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>CSS | XML | <strong title="this is the default value">auto</strong></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/SVG/animate.html#AttributeTypeAttribute" title="http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>Этот атрибут может принимать одно из следующих значений:</p> + +<dl> + <dt>CSS</dt> + <dd>Указывает на то, что значение параметра {{ SVGAttr("attributeName") }} является именем свойства CSS, определяемого как анимация.</dd> + <dt> </dt> + <dt>XML</dt> + <dd>Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имен XML по умолчанию для целевого элемента.</dd> + <dt>auto</dt> + <dd>Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имен XML по умолчанию для элемента.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут быть использованы с атрибутом <code>attributeType</code></p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> + <li>{{ SVGElement("set") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/class/index.html b/files/ru/web/svg/attribute/class/index.html new file mode 100644 index 0000000000..622423f521 --- /dev/null +++ b/files/ru/web/svg/attribute/class/index.html @@ -0,0 +1,190 @@ +--- +title: class +slug: Web/SVG/Attribute/class +translation_of: Web/SVG/Attribute/class +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Домашняя страница справочника по SVG аттрибутам</a></p> + +<p>Присвоение класса или набора классов элементу. Вы можете присовить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".</p> + +<p>Класс элемента имеет 2 ключевые роли:</p> + +<ul> + <li>Селектор таблицы стилей, для использования когда автор желает стилизировать набор(несколько) элементов.</li> + <li>Для общих целей Броузера.</li> +</ul> + +<p>Класс может быть использован для стилизации SVG содержимого используя CSS.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts"><list-of-class-names></a></td> + </tr> + <tr> + <th scope="row">Возможна анимация</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2nd Edition): The class attribute</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","List-of-Ts") }}</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><html> + <body> + <svg width="120" height="220" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <style type="text/css" > + <![CDATA[ + rect.rectClass { + stroke: #000066; + fill: #00cc00; + } + circle.circleClass { + stroke: #006600; + fill: #cc0000; + } + ]]> + </style> + + <rect class="rectClass" x="10" y="10" width="100" height="100"/> + <circle class="circleClass" cx="40" cy="50" r="26"/> + </svg> + </body> +</html></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>В следующих элементах допустимо использовать аттрибут <code>class</code></p> + +<p>:{{ SVGElement("a") }}</p> + +<div class="threecolumns"> +<ul> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("desc") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("line") }}</li> + <li>{{ SVGElement("linearGradient") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li>{{ SVGElement("path") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("polygon") }}</li> + <li>{{ SVGElement("polyline") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("textPath") }}</li> + <li>{{ SVGElement("title") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("use") }}</li> +</ul> +</div> + +<h2 id="Совместимость_с_броузерами">Совместимость с броузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Animation support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("5") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/ru/web/svg/attribute/core/index.html b/files/ru/web/svg/attribute/core/index.html new file mode 100644 index 0000000000..4423aa5468 --- /dev/null +++ b/files/ru/web/svg/attribute/core/index.html @@ -0,0 +1,85 @@ +--- +title: Основные атрибуты SVG +slug: Web/SVG/Attribute/Core +tags: + - SVG +translation_of: Web/SVG/Attribute/Core +--- +<p>Основные атрибуты SVG — это все общие атрибуты, которые могут быть указаны в SVG элементах.</p> + +<div class="index"> +<ul> + <li><a href="#"><code>id</code></a></li> + <li><a href="#attr-lang"><code>lang</code></a></li> + <li><a href="#attr-tabindex"><code>tabindex</code></a></li> + <li><a href="#attr-xml:base"><code>xml:base</code></a></li> + <li><a href="#attr-xml:lang"><code>xml:lang</code></a></li> + <li><a href="#attr-xml:space"><code>xml:space</code></a></li> +</ul> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt id="attr-id">{{SVGAttr('id')}}</dt> + <dd>Определяет идентификатор (ID), который должен быть уникальным во всем документе. Его цель — идентификация элемента при связывании (с использованием фрагмента идентификатора), написании скрипта или стилизации (с помощью CSS).<br> + <small><em>Значение</em>: Любое строковое значение ID; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> + <dt id="attr-lang">{{SVGAttr('lang')}}</dt> + <dd> + <p>Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определенном в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">документе IETF "Tags for Identifying Languages (BCP47)"</a>.</p> + + <div class="note"> + <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p> + </div> + + <p><small><em>Значение</em>: Любой валидный язык ID; <em>Анимируемый</em>: <strong>Нет</strong></small></p> + </dd> + <dt id="attr-tabindex">{{SVGAttr('tabindex')}}</dt> + <dd>Атрибут SVG <code>tabindex</code> позволяет контролировать, является ли элемент фокусируемым, и определять относительный порядок элемента для целей последовательной навигации фокуса.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Integer"><integer></a>; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> + <dt id="attr-xml:base">{{SVGAttr('xml:base')}}</dt> + <dd>Указывает базовый IRI, отличный от базового IRI текущего документа.<br> + <small><em>Тип</em>: <a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> + <dt id="attr-xml:lang">{{SVGAttr('xml:lang')}}</dt> + <dd> + <p>Это универсальный атрибут, разрешенный во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (<code>null</code>) значение атрибута (<code>xml:lang=""</code>) для указания неизвестного языка. Вместо этого, используйте <code>xml:lang="und"</code>.</p> + + <div class="note"> + <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p> + </div> + + <p><small><em>Значение</em>: Любой валидный язык ID; <em>Анимируемый</em>: <strong>Нет</strong></small></p> + </dd> + <dt id="attr-xml:space">{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}</dt> + <dd> + <p>SVG поддерживает стандартный XML-атрибут <code>xml:space</code> для указания обработки символов пробела в пределах заданных {{ SVGElement("text") }} символов текущего элемента.</p> + + <div class="note"> + <p><strong>Примечание:</strong> Вместо атрибута <code>xml:space</code> следует использовать CSS свойство {{cssxref('white-space')}}.</p> + </div> + + <p><small><em>Значение</em>: <code><strong>default</strong></code> | <code>preserve</code>; <em>Анимируемый</em>: <strong>Нет</strong></small></p> + </dd> +</dl> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("svg.attributes.core")}}</p> + +<div id="gtx-anchor" style="position: absolute; left: 249.15px; top: 1694.6px; width: 92.1875px; height: 15.2001px;"></div> + +<div class="jfk-bubble gtx-bubble"> +<div class="jfk-bubble-content-id" id="bubble-32"> +<div id="gtx-host" style="max-width: 400px;"></div> +</div> + +<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> + +<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 26.5px;"> +<div class="jfk-bubble-arrowimplbefore"></div> + +<div class="jfk-bubble-arrowimplafter"></div> +</div> +</div> diff --git a/files/ru/web/svg/attribute/cx/index.html b/files/ru/web/svg/attribute/cx/index.html new file mode 100644 index 0000000000..6e7c22c089 --- /dev/null +++ b/files/ru/web/svg/attribute/cx/index.html @@ -0,0 +1,70 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/cx +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси x. Если атрибут не определён, то эффект такой, как если бы было указано значение "0".</p> + +<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату x набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативные документы (en)</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute">SVG 1.1 (2nd Edition): The circle element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml"> <svg width="120" height="220" + viewBox="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <style type="text/css" > + + <![CDATA[ + circle.circleClass { + stroke: #006600; + fill: #cc0000; + } + + ]]> + </style> + <circle class="circleClass" cx="40" cy="50" r="26"/> +</svg> +</pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>cx</code></p> + +<ul> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/cy/index.html b/files/ru/web/svg/attribute/cy/index.html new file mode 100644 index 0000000000..d4b51c5f9b --- /dev/null +++ b/files/ru/web/svg/attribute/cy/index.html @@ -0,0 +1,69 @@ +--- +title: cy +slug: Web/SVG/Attribute/cy +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/cy +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси y. Если атрибут не определён, то эффект такой, как если бы было указано значение "0".</p> + +<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату y набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/ru/docs/Web/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативные документы (en)</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElementCYAttribute" title="http://www.w3.org/TR/SVG/shapes.html#CircleElementCYAttribute">SVG 1.1 (2nd Edition): The circle element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCYAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCYAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCYAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCYAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml"> <svg width="120" height="220" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <style type="text/css" > + + <![CDATA[ + circle.circleClass { + stroke: #006600; + fill: #cc0000; + } + + ]]> + </style> + <circle class="circleClass" cx="40" cy="50" r="26"/> +</svg></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>cy</code></p> + +<ul> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/d/index.html b/files/ru/web/svg/attribute/d/index.html new file mode 100644 index 0000000000..708aa0cbad --- /dev/null +++ b/files/ru/web/svg/attribute/d/index.html @@ -0,0 +1,566 @@ +--- +title: d +slug: Web/SVG/Attribute/d +translation_of: Web/SVG/Attribute/d +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>d</code></strong> предоставляет определение пути для рисования.</p> + +<p>Определение пути - это <a href="#Path_commands">список команд пути</a>, в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.</p> + +<p>Три элемента используют этот атрибут: {{SVGElement("path")}}, {{SVGElement("glyph")}}, и {{SVGElement("missing-glyph")}}</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" + d="M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example', '100%', 200)}}</p> +</div> + +<h2 id="path">path</h2> + +<p>Для {{SVGElement('path')}}, <code>d</code> - строка, содержащая ряд команд пути, которые определяют путь, который должен нарисован.(maybe 'drawn' not 'drown')</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="glyph">glyph</h2> + +<p class="warning"><strong>Warning:</strong> Начиная с SVG2 {{SVGElement('glyph')}} устарел и не должен использоваться.</p> + +<p>Для {{SVGElement('glyph')}}, <code>d</code> является строкой, содержащей серию команд пути, которые определяют форму контура глифа.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Сноска:</strong> Точка происхождения (координата <code>0</code>,<code>0</code>) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет свое происхождение в левом нижнем углу своего бокса.</p> + +<h2 id="missing-glyph">missing-glyph</h2> + +<p class="warning"><strong>Внимание:</strong> Начиная с SVG2 {{SVGElement('missing-glyph')}} устарел и не должен использоваться.</p> + +<p>Для {{SVGElement('missing-glyph')}}, <code>d</code> является строкой, содержащей серию команд пути, которые определяют форму контура глифа.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Команды_пути">Команды пути</h2> + +<p><em>(Path commands)</em></p> + +<p>Команды пути - это команды, объединённые вместе в одну строку и определяющие путь, который нужно нарисовать. Каждая команда состоит из буквы, следующей за некоторыми числами, которые представляют параметры команды.</p> + +<p>SVG определяет 6 типов команд пути для всех 20 команд:</p> + +<ul> + <li>MoveTo: <code>M</code>, <code>m</code></li> + <li>LineTo: <code>L</code>, <code>l</code>, <code>H</code>, <code>h</code>, <code>V</code>, <code>v</code></li> + <li>Cubic Bézier Curve: <code>C</code>, <code>c</code>, <code>S</code>, <code>s</code></li> + <li>Quadratic Bézier Curve: <code>Q</code>, <code>q</code>, <code>T</code>, <code>t</code></li> + <li>Elliptical Arc Curve: <code>A</code>, <code>a</code></li> + <li>ClosePath: <code>Z</code>, <code>z</code></li> +</ul> + +<p class="note"><strong>Заметка:</strong> Команды чувствительны к регистру; команда верхнего регистра указывает свои аргументы как абсолютные позиции, тогда как команда нижнего регистра указывает точки относительно текущей позиции.</p> + +<p>Всегда можно указать отрицательное значение в качестве аргумента для команды: отрицательные углы будут вращаться против часовой стрелки, абсолютные позиции x и y будут приниматься за отрицательные координаты, отрицательные относительные значения x будут перемещаться влево, а отрицательные относительные значения y будут двигаться вверх.</p> + +<h3 id="Команды_перемещения">Команды перемещения</h3> + +<p><em>(MoveTo path commands)</em></p> + +<p><em>MoveTo </em>инструкции можно рассматривать как собирание чертежного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.</p> + +<p class="note"><strong>Заметка:</strong> Хорошей практикой является открытие всех путей с помощью команды <strong>moveto</strong>, потому что без начального <strong>moveto</strong> команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределенному поведению.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Команда</th> + <th scope="col">Параметры</th> + <th scope="col">Примечания</th> + </tr> + <tr> + <th scope="row">M</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td>Движение начала следующего под-пути к координатам <code>x</code>,<code>y</code>. Любая последующая координатная пара(ы) интерпретируется как параметр(ы) для неявных абсолютных команд LineTo(L) (см. Ниже).<br> + Формула: P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">m</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td> + <p>Перемещает начало следующего подпути, сдвинув последнюю известную позицию пути на <code>dx</code> вдоль оси <code>x</code> и на <code>dy</code> вдоль оси <code>y</code>. Любая последующая пара координат считается неявной относительной командой LineTo (<code>l</code>) (см. ниже)<br> + Формула: P<sub>n</sub>= {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Examples">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" + d="M 10,10 h 10 + m 0,10 h 10 + m 0,10 h 10 + M 40,20 h 10 + m 0,10 h 10 + m 0,10 h 10 + m 0,10 h 10 + M 50,50 h 10 + m-20,10 h 10 + m-20,10 h 10 + m-20,10 h 10" /> +</svg></pre> + +<p>{{EmbedLiveSample('Команды_перемещения', '100%', 200)}}</p> + +<h3 id="LineTo_path_commands">LineTo path commands</h3> + +<p><em>LineTo</em> инструкции проводят прямую линию от <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}), до <em>end point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}), на основе указанных параметров. Конечная точка <em>end point </em>(P<sub>n</sub>) становится текущей точкой для следующей команды (P<sub>o</sub><sup>'</sup>).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">L</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td> + <p>Рисует линию из <em>текущей точки в конечную точку определенную</em> <code>x</code>,<code>y</code>. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (<code>L</code>). Формула: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p> + </td> + </tr> + <tr> + <th scope="row">l</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td>Draw a line from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All usubsequente pair of coordinates are considered implicite relative LineTo (<code>l</code>) command (<em>see below</em>).</td> + </tr> + <tr> + <th scope="row">H</th> + <td><code>x</code>+</td> + <td>Draw a horizontal line from the current point to the new <code>x</code> coordinate (<em>y coordinate stay unchanged</em>). The current point get its x coordinate updated for the next command. All subsequente value are considered an implicite absolute horizontal LineTo (<code>H</code>) command.</td> + </tr> + <tr> + <th scope="row">h</th> + <td><code>dx</code>+</td> + <td>Draw a horizontal line from the current point to a point shift by <code>dx</code> along the the x-axis (<em>y coordinate stay unchanged</em>). The current point get its X coordinate updated by <code>dx</code> for the next command. All subsequente value are considered an implicite relative horizontal LineTo (<code>h</code>) command.</td> + </tr> + <tr> + <th scope="row">V</th> + <td><code>y</code>+</td> + <td>Draw a vertical line from the current point to the new <code>y</code> coordinate (<em>x coordinate stay unchanged</em>). The current point get its y coordinate updated for the next command. All subsequente value are considered an implicite absolute vertical LineTo (<code>V</code>) command.</td> + </tr> + <tr> + <th scope="row">v</th> + <td><code>dy</code>+</td> + <td>Draw a vertical line from the current point to a point shift by <code>dy</code> along the y-axis (<em>x coordinate stay unchanged</em>). The current point get its Y coordinate updated by <code>dy</code> for the next command. All subsequente value are considered an implicite relative vertical LineTo (<code>v</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_2">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <!-- LineTo commands in absolute coordinates --> + <path fill="none" stroke="red" + d="M 10,10 + L 90,90 + V 10 + H 50" /> + + <!-- LineTo commands in relative coordinates --> + <path fill="none" stroke="red" + d="M 110,10 + l 80,80 + v -80 + h -40" /> +</svg></pre> + +<p>{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}</p> + +<h3 id="Cubic_Bézier_Curve">Cubic Bézier Curve</h3> + +<p><em>Cubic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using four points: A starting point, a end point, and two control points to define the curvature.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">C</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x1</code>,<code>y1</code> are the coordinates of the control point at the begining of the curve where <code>x2</code>,<code>y2</code> are the coordinates of the controle point at the end of the curve. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente triplets of coordinates are considered implicite absolute cubic Bézier curve (<code>C</code>) command.</td> + </tr> + <tr> + <th scope="row">c</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx1</code>,<code>dy1</code> are the coordinates of the control point at the beginning of the curve relative to the starting point of the curve and <code>dx2</code>,<code>dy2</code> are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente triplets of coordinates are considered implicite relative cubic Bézier curve (<code>c</code>) command.</td> + </tr> + <tr> + <th scope="row">S</th> + <td>(<code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x2</code>,<code>y2</code> are the coordinates of the controle point at the end of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute smooth cubic Bézier curve (<code>S</code>) command.</td> + </tr> + <tr> + <th scope="row">s</th> + <td>(<code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx2</code>,<code>dy2</code> are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente duo of coordinates are considered implicite relative smooth cubic Bézier curve (<code>s</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_3">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Quadratic Bézier curve with absolute coordinate --> + <path fill="none" stroke="red" + d="M 10,90 + C 30,90 25,10 50,10 + S 70,90 90,90" /> + + <!-- Quadratic Bézier curve with relative coordinate --> + <path fill="none" stroke="red" + d="M 110,90 + c 20,0 15,-80 40,-80 + s 20,80 40,80" /> + + <!-- Highlight the curve vertex and control points --> + <g id="ControlPoints"> + + <!-- First cubic command control points --> + <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> + <circle cx="30" cy="90" r="1.5"/> + + <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> + <circle cx="25" cy="10" r="1.5"/> + + <!-- Second smooth command control points (the first one is implicite) --> + <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" /> + <circle cx="75" cy="10" r="1.5" fill="lightgrey"/> + + <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" /> + <circle cx="70" cy="90" r="1.5" /> + + <!-- curve vertex points --> + <circle cx="10" cy="90" r="1.5"/> + <circle cx="50" cy="10" r="1.5"/> + <circle cx="90" cy="90" r="1.5"/> + </g> + <use xlink:href="#ControlPoints" x="100" /> +</svg></pre> + +<p>{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}}</p> + +<h3 id="Quadratic_Bézier_Curve">Quadratic Bézier Curve</h3> + +<p><em>Quadratic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using three points: A starting point, a end point, and a control point to define the curvature.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">Q</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x1</code>,<code>y1</code> are the coordinates of the control point for the curve. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute quadratic Bézier curve (<code>Q</code>) command.</td> + </tr> + <tr> + <th scope="row">q</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx1</code>,<code>dy1</code> are the coordinates of the control point for the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente duo of coordinates are considered implicite relative quadratic Bézier curve (<code>q</code>) command.</td> + </tr> + <tr> + <th scope="row">T</th> + <td>(<code>x</code>,<code>y</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente coordinates are considered implicite absolute smooth quadratic Bézier curve (<code>T</code>) command.</td> + </tr> + <tr> + <th scope="row">t</th> + <td>(<code>dx</code>,<code>dy</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente coordinates are considered implicite relative smooth quadratic Bézier curve (<code>t</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_4">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Quadratic Bézier curve with implicite repetition --> + <path fill="none" stroke="red" + d="M 10,50 + Q 25,25 40,50 + t 30,0 30,0 30,0 30,0 30,0" /> + + <!-- Highlight the curve vertex and control points --> + <g> + <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /> + <circle cx="25" cy="25" r="1.5" /> + + <!-- curve vertex points --> + <circle cx="10" cy="50" r="1.5"/> + <circle cx="40" cy="50" r="1.5"/> + + <g id="SmoothQuadraticDown"> + <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> + <circle cx="55" cy="75" r="1.5" fill="lightgrey" /> + <circle cx="70" cy="50" r="1.5" /> + </g> + + <g id="SmoothQuadraticUp"> + <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> + <circle cx="85" cy="25" r="1.5" fill="lightgrey" /> + <circle cx="100" cy="50" r="1.5" /> + </g> + + <use xlink:href="#SmoothQuadraticDown" x="60" /> + <use xlink:href="#SmoothQuadraticUp" x="60" /> + <use xlink:href="#SmoothQuadraticDown" x="120" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}}</p> + +<h3 id="Elliptical_Arc_Curve">Elliptical Arc Curve</h3> + +<p><em>Elliptical arc curves</em> are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">A</th> + <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>x</code> <code>y</code>)+</td> + <td> + <p>Draw an Arc curve from the current point to the coordinate <code>x</code>,<code>y</code>. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p> + + <ul> + <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li> + <li><code>angle</code> represente a rotation (in degree) of the ellipse relative to the x-axis;</li> + <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. + <ul> + <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li> + <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li> + </ul> + </li> + </ul> + The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente set of parameters are considered implicite absolute arc curve (<code>A</code>) command.</td> + </tr> + <tr> + <th scope="row">a</th> + <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>dx</code> <code>dy</code>)+</td> + <td> + <p>Draw an Arc curve from the current point to to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p> + + <ul> + <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li> + <li><code>angle</code> represente a rotation (in degree) of the ellipse relative to the x-axis;</li> + <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. + <ul> + <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li> + <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li> + </ul> + </li> + </ul> + The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente set of parameters are considered implicite relative arc curve (<code>a</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_5">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + + <!-- The influence of the arc flags on which arc is drawn --> + <path fill="none" stroke="red" + d="M 6,10 + A 6 4 10 1 0 14,10" /> + + <path fill="none" stroke="lime" + d="M 6,10 + A 6 4 10 1 1 14,10" /> + + <path fill="none" stroke="purple" + d="M 6,10 + A 6 4 10 0 1 14,10" /> + + <path fill="none" stroke="pink" + d="M 6,10 + A 6 4 10 0 0 14,10" /> +</svg></pre> + +<p>{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}</p> + +<h3 id="ClosePath">ClosePath</h3> + +<p><em>ClosePath</em> instructions draw a straight line from the current position, to the first point in the path.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">Z, z</th> + <td></td> + <td>Close the curent subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points.</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the {{SVGAttr('stroke-linejoin')}} setting), rather than just being placed at the same coordinates.</p> + +<h4 id="Examples_6">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"> + + <!-- + An open shape with the last point of + the path different than the first one + --> + <path stroke="red" + d="M 5,1 + l -4,8 8,0" /> + + <!-- + An open shape with the last point of + the path matching the first one + --> + <path stroke="red" + d="M 15,1 + l -4,8 8,0 -4,-8" /> + + <!-- + An closed shape with the last point of + the path different than the first one + --> + <path stroke="red" + d="M 25,1 + l -4,8 8,0 + z" /> +</svg></pre> + +<p>{{EmbedLiveSample('ClosePath', '100%', 200)}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "paths.html#DProperty", "d")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for <code><path></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><glyph></code> and <code><missing-glyph></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><path></code></td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/svg/attribute/dur/index.html b/files/ru/web/svg/attribute/dur/index.html new file mode 100644 index 0000000000..7580e8fd28 --- /dev/null +++ b/files/ru/web/svg/attribute/dur/index.html @@ -0,0 +1,95 @@ +--- +title: dur +slug: Web/SVG/Attribute/dur +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/dur +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>dur</code></strong> отображает простую длительность анимации.</p> + +<p>Пять элементов используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, и {{SVGElement("set")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100" height="100"> + <animate attributeType="XML" attributeName="y" from="0" to="50" + dur="1s" repeatCount="indefinite"/> + </rect> + <rect x="120" y="0" width="100" height="100"> + <animate attributeType="XML" attributeName="y" from="0" to="50" + dur="3s" repeatCount="indefinite"/> + </rect> +</svg></pre> + +<p>{{EmbedLiveSample("topExample", "220", "150")}}</p> +</div> + +<h2 id="Примечания_к_использованию">Примечания к использованию</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code><a href="/ru/SVG/Content_type#Clock-value" title="en/SVG/Content_type#Clock-value"><clock-value></a></code> | <code>indefinite</code> | <code>media</code></td> + </tr> + <tr> + <th scope="row">Значение по-умолчанию</th> + <td><code>indefinite</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><clock-value></code></dt> + <dd>Задает длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (<code>h</code>), минутах (<code>m</code>), секундах (<code>s</code>) или миллисекундах (<code>ms</code>). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: <code>hh:mm:ss.iii</code> или <code>mm:ss.iii</code></dd> + <dt><code>media</code></dt> + <dd>Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.</dd> + <dt><code>indefinite</code></dt> + <dd>Задаёт простую длительность, как незаданную</dd> + <dt></dt> +</dl> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Интерполяция не будет работать, если простая длительность остается неопределенной (хотя это может быть полезно для элементов {{ SVGElement("set") }}).</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#DurAttribute", "dur")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#DurAttribute", "dur")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("svg.elements.animate.dur")}}</p> diff --git a/files/ru/web/svg/attribute/end/index.html b/files/ru/web/svg/attribute/end/index.html new file mode 100644 index 0000000000..c4db1e943f --- /dev/null +++ b/files/ru/web/svg/attribute/end/index.html @@ -0,0 +1,45 @@ +--- +title: end +slug: Web/SVG/Attribute/end +translation_of: Web/SVG/Attribute/end +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Этот атрибут определяет конечное значение для анимации, которое может ограничить активную длительность.</p> + +<p>Значение атрибута представляет собой разделенный точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определенным для {{ SVGAttr("begin") }} атрибута .</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Animation timing attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><End-value-list></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#EndAttribute" title="http://www.w3.org/TR/SVG/animate.html#EndAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>Для типов значений, разрешенных в, <code><end-value-list></code> см. {{ SVGAttr("begin") }} атрибут.</p> + +<h2 id="Examples">Examples</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>end</code> attribute</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> +</ul> diff --git a/files/ru/web/svg/attribute/fill-opacity/index.html b/files/ru/web/svg/attribute/fill-opacity/index.html new file mode 100644 index 0000000000..ca44666cf6 --- /dev/null +++ b/files/ru/web/svg/attribute/fill-opacity/index.html @@ -0,0 +1,69 @@ +--- +title: fill-opacity +slug: Web/SVG/Attribute/fill-opacity +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/fill-opacity +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Этот атрибут определяет прозрачность цвета заполнения содержимого элемента.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут оформления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a> | inherit</td> + </tr> + <tr> + <th scope="row">Предустановленное значение</th> + <td>1</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/SVG/painting.html#FillOpacityProperty" title="http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <circle cx="100" cy="100" r="100" /> +</svg> +<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <circle cx="100" cy="100" r="100" fill-opacity="0.25" /> +</svg></pre> + +<h3 id="результат">результат</h3> + +<p>{{EmbedLiveSample('Example', 200, 200)}}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие группы элементов могут быть использованы с атрибутом <code>fill-opacity</code>:</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Элементы графических форм (Shape elements</a>) »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TexteContent">Текстовые элементы</a> »</li> +</ul> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("opacity") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/fill-rule/index.html b/files/ru/web/svg/attribute/fill-rule/index.html new file mode 100644 index 0000000000..d83dad58c3 --- /dev/null +++ b/files/ru/web/svg/attribute/fill-rule/index.html @@ -0,0 +1,162 @@ +--- +title: fill-rule +slug: Web/SVG/Attribute/fill-rule +translation_of: Web/SVG/Attribute/fill-rule +--- +<div>{{SVGRef}}</div> + +<p>The <strong><code>fill-rule</code></strong> этот атрибут представления, формулирует алгоритм, используемый для определения внутренней части фигуры.</p> + +<p class="note"><strong>Note:</strong> Атрибут представления, <code>fill-rule</code> может быть использован как CSS свойство.</p> + +<p>Как атрибут представления, он может быть применен к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> + <!-- Default value for fill-rule --> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + The center of the shape has two + path segments (shown by the red stroke) + between it and infinity. It is therefore + considered outside the shape, and not filled. + --> + <polygon fill-rule="evenodd" stroke="red" + points="150,0 121,90 198,35 102,35 179,90"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>nonzero</code> | <code>evenodd</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>nonzero</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p>The <code>fill-rule</code> attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:</p> + +<h3 id="nonzero">nonzero</h3> + +<p>The value <code>nonzero</code> determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.</p> + +<h4 id="Example">Example</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of nonzero fill rule on crossing path segments --> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + Effect of nonzero fill rule on a shape inside a shape + with the path segment moving in the same direction + (both squares drawn clockwise, to the "right") + --> + <path fill-rule="nonzero" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + Effect of nonzero fill rule on a shape inside a shape + with the path segment moving in the opposite direction + (one square drawn clockwise, the other anti-clockwise) + --> + <path fill-rule="nonzero" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> +</svg></pre> + +<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p> + +<h3 id="evenodd">evenodd</h3> + +<p>The value <code>evenodd</code> determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.</p> + +<h4 id="Example_2">Example</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> + <!-- Effect of evenodd fill rule on crossing path segments --> + <polygon fill-rule="evenodd" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + Effect of evenodd fill rule on on a shape inside a shape + with the path segment moving in the same direction + (both squares drawn clockwise, to the "right") + --> + <path fill-rule="evenodd" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + Effect of evenodd fill rule on a shape inside a shape + with the path segment moving in opposite direction + (one square drawn clockwise, the other anti-clockwise) + --> + <path fill-rule="evenodd" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> +</svg></pre> + +<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and text</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and text</td> + </tr> + </tbody> +</table> + +<div class="ddict_div" style="top: 1201.2px; max-width: 120px; left: 303.181px;"><img class="ddict_audio"> +<p class="ddict_sentence">да</p> +</div> diff --git a/files/ru/web/svg/attribute/fill/index.html b/files/ru/web/svg/attribute/fill/index.html new file mode 100644 index 0000000000..9e4c654a44 --- /dev/null +++ b/files/ru/web/svg/attribute/fill/index.html @@ -0,0 +1,99 @@ +--- +title: fill +slug: Web/SVG/Attribute/fill +tags: + - NeedsUpdate + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/fill +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Атрибут <code>fill</code> имеет два значения в зависимости от используемого контекста.</p> + +<p><span style="line-height: 1.572;">По умолчанию, когда элементы анимации заканчиваются и их эффекты больше не применяются к значению представления для целевых атрибутов. Атрибут <code>fill</code> может использоваться для сохранения значения анимации после окончания активной продолжительности элемента анимации.</span></p> + +<p>Для фигур и текста атрибут <code>fill</code> является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения {{ SVGAttr("fill-rule") }} атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<h3 id="Для_анимируемых_элементов">Для анимируемых элементов</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибуты времени анимации</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><strong title="this is the default value">remove</strong> | freeze</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/SVG/animate.html#FillAttribute" title="http://www.w3.org/TR/SVG/animate.html#FillAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>remove (default)</dt> + <dd>Эффект анимации удаляется (больше не применяется) при завершении активной продолжительности анимации. После активного конца анимации анимация больше не влияет на конечный объект (если анимация не перезапущена).</dd> + <dt>freeze</dt> + <dd>Эффект анимации «заморожен» при активной длительности анимации на оставшийся срок действия документа (или до перезапуска анимации).</dd> +</dl> + +<h3 id="Для_текста_и_форм">Для текста и форм</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td> + <p><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a>, <code>context-fill</code>, <code>context-stroke</code></p> + </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/SVG/painting.html#FillProperty" title="http://www.w3.org/TR/SVG/painting.html#FillProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Пример_1_Простой_SVG">Пример 1: Простой SVG</h3> + +<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <circle cx="100" cy="100" r="100" fill="#666"/> +</svg></pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('Example_1_Simple_SVG', 200, 200)}}</p> + +<h2 id="Использование_context-fill">Использование <code>context-fill</code></h2> + +<p>Для информации об использовании нестандартного и ограниченного значения <code>context-fill</code> (и <code>context-stroke</code>) смотрите документацию {{cssxref("-moz-context-properties")}}.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p>Следующие элементы могут использовать атрибут <code>fill</code></p> + +<ul> + <li><a href="/en/SVG/Element#Animation_elements" title="en/SVG/Element#Animation">Animation elements</a> »</li> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> diff --git a/files/ru/web/svg/attribute/font-weight/index.html b/files/ru/web/svg/attribute/font-weight/index.html new file mode 100644 index 0000000000..1985975c56 --- /dev/null +++ b/files/ru/web/svg/attribute/font-weight/index.html @@ -0,0 +1,86 @@ +--- +title: font-weight +slug: Web/SVG/Attribute/font-weight +tags: + - SVG +translation_of: Web/SVG/Attribute/font-weight +--- +<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>font-weight</code> позволяет выбрать из шрифтового семейства начертание шрифта с указанной насыщенностью (иначе говоря, толщиной линий знаков, "жирностью") .</p> + +<p>Как и любой атрибут представления, <code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> </span></font>font-weight</code> может быть использован в виде свойства в CSS стилях, см. {{ cssxref("font-weight","CSS font-weight") }} для подробной информации.</p> + +<h2 id="Контекст_применения">Контекст применения</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значения</th> + <td><strong>normal</strong> | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 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/text.html#FontWeightProperty" title="http://www.w3.org/TR/SVG11/text.html#FontWeightProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Значение_ключевых_слов">Значение ключевых слов</h2> + +<ul> + <li><strong>bold</strong> - соответствует значению <strong>700 </strong>- полужирное начертание</li> + <li><strong>normal</strong> - соответствует значению <strong>400 </strong>- нормальное начертание</li> + <li><strong>bolder </strong>и <strong>lighter</strong> указывают браузеру использовать соответственно более жирное или более тонкое начертание в сравнении с текущим значением родительского элемента. Дочерние элементы, в свою очередь, унаследуют получившееся значение.</li> + <li><strong>inherit </strong>- дает указание браузеру унаследовать тип начертания от родительского элемента.</li> +</ul> + +<h2 id="Предостережения">Предостережения</h2> + +<p>Для многих шрифтов доступны только значения 400 и 700 - нормальное и полужирное начертания соответственно. Доступные значения могут варьироваться в зависимости от шрифта.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="css">css</h3> + +<pre class="brush: css">p.normal {font-weight:normal;} +p.thick {font-weight:bold;} +p.thicker {font-weight:900;}</pre> + +<h3 id="html">html</h3> + +<pre class="brush: html"><p class="normal">This is a paragraph.</p> +<p class="light">This is a paragraph.</p> +<p class="thick">This is a paragraph.</p> +<p class="thicker">This is a paragraph.</p> +</pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>font-weight</code>.</p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elements</a> »</li> +</ul> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("svg.attributes.presentation.font-weight")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{ cssxref("font-weight","CSS font-weight") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/id/index.html b/files/ru/web/svg/attribute/id/index.html new file mode 100644 index 0000000000..54590a4cd4 --- /dev/null +++ b/files/ru/web/svg/attribute/id/index.html @@ -0,0 +1,113 @@ +--- +title: id +slug: Web/SVG/Attribute/id +tags: + - SVG +translation_of: Web/SVG/Attribute/id +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <code><strong>id</strong></code> присваивает уникальное имя элементу.</p> + +<p>Этот атрибут используется всеми элементами.</p> + +<div id="topExample"> +<pre class="brush: html notranslate"><svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + <![CDATA[ + #smallRect { + stroke: #000066; + fill: #00cc00; + } + ]]> + </style> + + <rect id="smallRect" x="10" y="10" width="100" height="100" /> +</svg> +</pre> + +<p>{{EmbedLiveSample("topExample", "120", "120")}}</p> +</div> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><id></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><em>Отсутствует</em></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + </tbody> +</table> + +<dl> + <dt><id></dt> + <dd> + <p>Задает идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать никаких пробелов.</p> + + <div class="blockIndicator note"> + <p><strong>Примечание:</strong> Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, <code>MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</code>) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL.</p> + </div> + + <p>Он должен быть валидным для XML-документов. Автономный документ SVG использует синтаксис XML 1.0, который указывает, что валидные идентификаторы включают только обозначенные символы (буквы, цифры и несколько знаков препинания) и не начинаются с цифры, символа точки (.) или с дефиса (-).</p> + </dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Более подробно определяет допустимые значения.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Исходное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("svg.attributes.style.class")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/HTML/Global_attributes/id">HTML <code>id</code></a></li> + <li>{{SVGAttr("class")}}</li> +</ul> + +<div class="jfk-bubble gtx-bubble"> +<div class="jfk-bubble-content-id" id="bubble-27"> +<div id="gtx-host" style="max-width: 400px;"></div> +</div> + +<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> + +<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 90px;"> +<div class="jfk-bubble-arrowimplbefore"></div> + +<div class="jfk-bubble-arrowimplafter"></div> +</div> +</div> diff --git a/files/ru/web/svg/attribute/index.html b/files/ru/web/svg/attribute/index.html new file mode 100644 index 0000000000..7d05b490e8 --- /dev/null +++ b/files/ru/web/svg/attribute/index.html @@ -0,0 +1,461 @@ +--- +title: Справочник SVG атрибутов +slug: Web/SVG/Attribute +tags: + - NeedsHelp + - SVG + - SVG Attribute + - SVG Reference + - Атрибуты + - Руководство +translation_of: Web/SVG/Attribute +--- +<p>« <a href="/ru/docs/Web/SVG" title="ru/docs/Web/SVG">SVG</a> / <a href="/ru/docs/Web/SVG/Элемент" title="ru/docs/Web/SVG/Элемент">Справочник SVG элементов</a> »</p> + +<p>Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведен список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают.</p> + +<h2 id="SVG_Атрибуты_от_А_до_Я">SVG Атрибуты от А до Я</h2> + +<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;"> +<h3 id="A">A</h3> + +<ul> + <li>{{ SVGAttr("accent-height") }}</li> + <li>{{ SVGAttr("accumulate") }}</li> + <li>{{ SVGAttr("additive") }}</li> + <li>{{ SVGAttr("alignment-baseline") }}</li> + <li>{{ SVGAttr("allowReorder") }}</li> + <li>{{ SVGAttr("alphabetic") }}</li> + <li>{{ SVGAttr("amplitude") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("ascent") }}</li> + <li>{{ SVGAttr("attributeName") }}</li> + <li>{{ SVGAttr("attributeType") }}</li> + <li>{{ SVGAttr("azimuth") }}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{ SVGAttr("baseFrequency") }}</li> + <li>{{ SVGAttr("baseline-shift") }}</li> + <li>{{ SVGAttr("baseProfile") }}</li> + <li>{{ SVGAttr("bbox") }}</li> + <li>{{ SVGAttr("begin") }}</li> + <li>{{ SVGAttr("bias") }}</li> + <li>{{ SVGAttr("by") }}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{ SVGAttr("calcMode") }}</li> + <li>{{ SVGAttr("cap-height") }}</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("clip") }}</li> + <li>{{ SVGAttr("clipPathUnits") }}</li> + <li>{{ SVGAttr("clip-path") }}</li> + <li>{{ SVGAttr("clip-rule") }}</li> + <li>{{ SVGAttr("color") }}</li> + <li>{{ SVGAttr("color-interpolation") }}</li> + <li>{{ SVGAttr("color-interpolation-filters") }}</li> + <li>{{ SVGAttr("color-profile") }}</li> + <li>{{ SVGAttr("color-rendering") }}</li> + <li>{{ SVGAttr("contentScriptType") }}</li> + <li>{{ SVGAttr("contentStyleType") }}</li> + <li>{{ SVGAttr("cursor") }}</li> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("descent") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("direction") }}</li> + <li>{{ SVGAttr("display") }}</li> + <li>{{ SVGAttr("divisor") }}</li> + <li>{{ SVGAttr("dominant-baseline") }}</li> + <li>{{ SVGAttr("dur") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{ SVGAttr("edgeMode") }}</li> + <li>{{ SVGAttr("elevation") }}</li> + <li>{{ SVGAttr("enable-background") }}</li> + <li>{{ SVGAttr("end") }}</li> + <li>{{ SVGAttr("exponent") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{ SVGAttr("fill") }}</li> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("fill-rule") }}</li> + <li>{{ SVGAttr("filter") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("flood-color") }}</li> + <li>{{ SVGAttr("flood-opacity") }}</li> + <li>{{ SVGAttr("font-family") }}</li> + <li>{{ SVGAttr("font-size") }}</li> + <li>{{ SVGAttr("font-size-adjust") }}</li> + <li>{{ SVGAttr("font-stretch") }}</li> + <li>{{ SVGAttr("font-style") }}</li> + <li>{{ SVGAttr("font-variant") }}</li> + <li>{{ SVGAttr("font-weight") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("fx") }}</li> + <li>{{ SVGAttr("fy") }}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li> + <li>{{ SVGAttr("glyph-orientation-vertical") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("gradientUnits") }}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{ SVGAttr("hanging") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("horiz-origin-x") }}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{ SVGAttr("id") }}</li> + <li>{{ SVGAttr("ideographic") }}</li> + <li>{{ SVGAttr("image-rendering") }}</li> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("intercept") }}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{ SVGAttr("k") }}</li> + <li>{{ SVGAttr("k1") }}</li> + <li>{{ SVGAttr("k2") }}</li> + <li>{{ SVGAttr("k3") }}</li> + <li>{{ SVGAttr("k4") }}</li> + <li>{{ SVGAttr("kernelMatrix") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> + <li>{{ SVGAttr("kerning") }}</li> + <li>{{ SVGAttr("keyPoints") }}</li> + <li>{{ SVGAttr("keySplines") }}</li> + <li>{{ SVGAttr("keyTimes") }}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{ SVGAttr("lang") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> + <li>{{ SVGAttr("letter-spacing") }}</li> + <li>{{ SVGAttr("lighting-color") }}</li> + <li>{{ SVGAttr("limitingConeAngle") }}</li> + <li>{{ SVGAttr("local") }}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{ SVGAttr("marker-end") }}</li> + <li>{{ SVGAttr("marker-mid") }}</li> + <li>{{ SVGAttr("marker-start") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("mask") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("mathematical") }}</li> + <li>{{ SVGAttr("max") }}</li> + <li>{{ SVGAttr("media") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("min") }}</li> + <li>{{ SVGAttr("mode") }}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{ SVGAttr("name") }}</li> + <li>{{ SVGAttr("numOctaves") }}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{ SVGAttr("offset") }}</li> + <li>{{ SVGAttr("onabort") }}</li> + <li>{{ SVGAttr("onactivate") }}</li> + <li>{{ SVGAttr("onbegin") }}</li> + <li>{{ SVGAttr("onclick") }}</li> + <li>{{ SVGAttr("onend") }}</li> + <li>{{ SVGAttr("onerror") }}</li> + <li>{{ SVGAttr("onfocusin") }}</li> + <li>{{ SVGAttr("onfocusout") }}</li> + <li>{{ SVGAttr("onload") }}</li> + <li>{{ SVGAttr("onmousedown") }}</li> + <li>{{ SVGAttr("onmousemove") }}</li> + <li>{{ SVGAttr("onmouseout") }}</li> + <li>{{ SVGAttr("onmouseover") }}</li> + <li>{{ SVGAttr("onmouseup") }}</li> + <li>{{ SVGAttr("onrepeat") }}</li> + <li>{{ SVGAttr("onresize") }}</li> + <li>{{ SVGAttr("onscroll") }}</li> + <li>{{ SVGAttr("onunload") }}</li> + <li>{{ SVGAttr("onzoom") }}</li> + <li>{{ SVGAttr("opacity") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("order") }}</li> + <li>{{ SVGAttr("orient") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("origin") }}</li> + <li>{{ SVGAttr("overflow") }}</li> + <li>{{ SVGAttr("overline-position") }}</li> + <li>{{ SVGAttr("overline-thickness") }}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{ SVGAttr("panose-1") }}</li> + <li>{{ SVGAttr("paint-order") }}</li> + <li>{{ SVGAttr("path") }}</li> + <li>{{ SVGAttr("pathLength") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("pointer-events") }}</li> + <li>{{ SVGAttr("points") }}</li> + <li>{{ SVGAttr("pointsAtX") }}</li> + <li>{{ SVGAttr("pointsAtY") }}</li> + <li>{{ SVGAttr("pointsAtZ") }}</li> + <li>{{ SVGAttr("preserveAlpha") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{ SVGAttr("r") }}</li> + <li>{{ SVGAttr("radius") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("rendering-intent") }}</li> + <li>{{ SVGAttr("repeatCount") }}</li> + <li>{{ SVGAttr("repeatDur") }}</li> + <li>{{ SVGAttr("requiredExtensions") }}</li> + <li>{{ SVGAttr("requiredFeatures") }}</li> + <li>{{ SVGAttr("restart") }}</li> + <li>{{ SVGAttr("result") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{ SVGAttr("scale") }}</li> + <li>{{ SVGAttr("seed") }}</li> + <li>{{ SVGAttr("shape-rendering") }}</li> + <li>{{ SVGAttr("slope") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("specularConstant") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("stdDeviation") }}</li> + <li>{{ SVGAttr("stemh") }}</li> + <li>{{ SVGAttr("stemv") }}</li> + <li>{{ SVGAttr("stitchTiles") }}</li> + <li>{{ SVGAttr("stop-color") }}</li> + <li>{{ SVGAttr("stop-opacity") }}</li> + <li>{{ SVGAttr("strikethrough-position") }}</li> + <li>{{ SVGAttr("strikethrough-thickness") }}</li> + <li>{{ SVGAttr("string") }}</li> + <li>{{ SVGAttr("stroke") }}</li> + <li>{{ SVGAttr("stroke-dasharray") }}</li> + <li>{{ SVGAttr("stroke-dashoffset") }}</li> + <li>{{ SVGAttr("stroke-linecap") }}</li> + <li>{{ SVGAttr("stroke-linejoin") }}</li> + <li>{{ SVGAttr("stroke-miterlimit") }}</li> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("stroke-width") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("systemLanguage") }}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{ SVGAttr("tableValues") }}</li> + <li>{{ SVGAttr("target") }}</li> + <li>{{ SVGAttr("targetX") }}</li> + <li>{{ SVGAttr("targetY") }}</li> + <li>{{ SVGAttr("text-anchor") }}</li> + <li>{{ SVGAttr("text-decoration") }}</li> + <li>{{ SVGAttr("text-rendering") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("transform") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("underline-position") }}</li> + <li>{{ SVGAttr("underline-thickness") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("unicode-bidi") }}</li> + <li>{{ SVGAttr("unicode-range") }}</li> + <li>{{ SVGAttr("units-per-em") }}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{ SVGAttr("v-alphabetic") }}</li> + <li>{{ SVGAttr("v-hanging") }}</li> + <li>{{ SVGAttr("v-ideographic") }}</li> + <li>{{ SVGAttr("v-mathematical") }}</li> + <li>{{ SVGAttr("values") }}</li> + <li>{{ SVGAttr("version") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("viewTarget") }}</li> + <li>{{ SVGAttr("visibility") }}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("widths") }}</li> + <li>{{ SVGAttr("word-spacing") }}</li> + <li>{{ SVGAttr("writing-mode") }}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("x-height") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("xChannelSelector") }}</li> + <li>{{ SVGAttr("xlink:actuate") }}</li> + <li>{{ SVGAttr("xlink:arcrole") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> + <li>{{ SVGAttr("xlink:role") }}</li> + <li>{{ SVGAttr("xlink:show") }}</li> + <li>{{ SVGAttr("xlink:title") }}</li> + <li>{{ SVGAttr("xlink:type") }}</li> + <li>{{ SVGAttr("xml:base") }}</li> + <li>{{ SVGAttr("xml:lang") }}</li> + <li>{{ SVGAttr("xml:space") }}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("yChannelSelector") }}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{ SVGAttr("z") }}</li> + <li>{{ SVGAttr("zoomAndPan") }}</li> +</ul> +</div> + +<h2 id="Категории">Категории</h2> + +<h3 id="Атрибуты_событий_анимации">Атрибуты событий анимации</h3> + +<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p> + +<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Целевые атрибуты анимации</h3> + +<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p> + +<h3 id="Атрибуты_времени_анимации">Атрибуты времени анимации</h3> + +<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p> + +<h3 id="Атрибуты_значений_анимации">Атрибуты значений анимации</h3> + +<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}</p> + +<h3 id="Атрибуты_добавления_анимации">Атрибуты добавления анимации</h3> + +<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p> + +<h3 id="Атрибуты_условий">Атрибуты условий</h3> + +<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p> + +<h3 id="Атрибуты_ядра">Атрибуты ядра</h3> + +<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p> + +<h3 id="Атрибуты_событий_документа">Атрибуты событий документа</h3> + +<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p> + +<h3 id="Атрибуты_простых_фильтров">Атрибуты простых фильтров</h3> + +<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p> + +<h3 id="Атрибуты_графических_событий">Атрибуты графических событий</h3> + +<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p> + +<h3 id="Атрибуты_представления">Атрибуты представления</h3> + +<div class="note">Заметьте, что все атрибуты представления SVG можно использовать как CSS свойства.</div> + +<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p> + +<h3 id="Атрибуты_передаточных_функций">Атрибуты передаточных функций</h3> + +<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p> + +<h3 id="XLink_атрибуты">XLink атрибуты</h3> + +<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p> diff --git a/files/ru/web/svg/attribute/keytimes/index.html b/files/ru/web/svg/attribute/keytimes/index.html new file mode 100644 index 0000000000..4df57edc2c --- /dev/null +++ b/files/ru/web/svg/attribute/keytimes/index.html @@ -0,0 +1,87 @@ +--- +title: keyTimes +slug: Web/SVG/Attribute/keyTimes +translation_of: Web/SVG/Attribute/keyTimes +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Атрибут <code>keyTimes</code> представляет собой разделенный точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке <code>keyTimes</code> задается как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.</p> + +<p>Если указан список <code>keyTimes</code>, то в списке <code>keyTimes</code> должно быть ровно столько же значений, сколько в списке {{ SVGAttr("values") }} .</p> + +<p>Каждое последовательное значение времени должно быть больше или равно предыдущему значению времени.</p> + +<p>Семантика списка keyTimes зависит от режима интерполяции:</p> + +<ul> + <li>Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задается; значения являются интерполяцией между ключевыми моментами.</li> + <li>Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задается; Функция анимации использует это значение до следующего времени, определенного в <code>keyTimes</code>.</li> +</ul> + +<p>Если в качестве режима интерполяции используется <em>paced</em>, атрибут <code>keyTimes </code>игнорируется.</p> + +<p>Если в качетсве параметра длительности выбрано <em>indefinite</em>, атрибут <code>keyTimes</code> игнорируется.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Animation value attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><list></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute" title="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <circle cx="60" cy="10" r="10"> + + <animate attributeName="cx" + attributeType="XML" + dur="4s" + values="60 ; 110 ; 60 ; 10 ; 60" + keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" + repeatCount="indefinite"/> + + <animate attributeName="cy" + attributeType="XML" + dur="4s" + values="10 ; 60 ; 110 ; 60 ; 10 " + keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" + repeatCount="indefinite"/> + + </circle> +</svg></pre> + +<p><strong>Демонстрация</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>keyTimes</code></p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/lang/index.html b/files/ru/web/svg/attribute/lang/index.html new file mode 100644 index 0000000000..86317240f1 --- /dev/null +++ b/files/ru/web/svg/attribute/lang/index.html @@ -0,0 +1,86 @@ +--- +title: lang +slug: Web/SVG/Attribute/lang +tags: + - SVG +translation_of: Web/SVG/Attribute/lang +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">Атрибут <strong><code>lang</code></strong> указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определенных элементов.</span></p> + +<p>Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имен). Если определены оба атрибута, то используется тот, который имеет пространство имен, а атрибут без пространства имен игнорируется.</p> + +<p>В SVG 1.1 существовал атрибут <code>lang</code>, определенный с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">формате BCP 47</a>. Глиф предназначался для использования, если атрибут <code>xml:lang</code> точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут <code>xml:lang</code> точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".</p> + +<p>Все элементы используют этот атрибут.</p> + +<div id="topExample"> +<pre class="brush: html; highlight[2] notranslate"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <text lang="en-US">This is some English text</text> +</svg></pre> +</div> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code><language-tag></code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><em>Отсутствует</em></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><language-tag></code></dt> + <dd> + <p>Это значение указывает язык, используемый для элемента. Синтаксис этого значения определен в <a href="https://tools.ietf.org/html/bcp47#section-2.1">спецификации BCP 47</a>.</p> + + <p>Наиболее распространенным синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделенных знаком минус. Например, <code>en-US</code> для американского английского языка или <code>de-AT</code> для австрийского немецкого.</p> + </dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#LangAttribute", "lang")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Сделал атрибут {{SVGAttr("lang")}} (без пространства имен) доступным для всех элементов и определил взаимодействие между ними.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementLangAttribute", "lang")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Устаревшее определение атрибута для элементов {{SVGElement("glyph")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("svg.attributes.core.lang")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://tools.ietf.org/html/bcp47">Спецификация BCP 47 для тегов для идентификации языков</a></li> +</ul> diff --git a/files/ru/web/svg/attribute/lengthadjust/index.html b/files/ru/web/svg/attribute/lengthadjust/index.html new file mode 100644 index 0000000000..69284fcc46 --- /dev/null +++ b/files/ru/web/svg/attribute/lengthadjust/index.html @@ -0,0 +1,33 @@ +--- +title: lengthAdjust +slug: Web/SVG/Attribute/lengthAdjust +translation_of: Web/SVG/Attribute/lengthAdjust +--- +<p><span class="seoSummary">Когда SVG элемент <code><text></code><strong> </strong>или<strong> </strong><code><tspan></code> имеет конкретную длину, установленную с помощью атрибута <code>textLengt</code>, атрибут <code>lengthAdjust</code> контролирует как текст помещается в эту длину (растягивается или сжимается).</span></p> + +<p>Существует 2 допустимых значения для атрибута <code>lengthAdjust</code>: <code>spacing</code> и <code>spacingAndGlyphs</code>. Используя <code>spacing</code> (установлено по умолчанию), форма букв сохраняется, но расстояние между ними увеличивается или уменьшается. Используя <code>spacingAndGlyphs</code> весь тестовый элемент растягивается.</p> + +<h2 id="SVG_text_fitting_using_lengthAdjust" name="SVG_text_fitting_using_lengthAdjust">SVG текст с использованием lengthAdjust</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"> + <g font-face="sans-serif"> + <text x="0" y="20" textLength="300" lengthAdjust="spacing"> + Stretched using spacing only. + </text> + <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs"> + Stretched using spacing and glyphs. + </text> + <text x="0" y="80" textLength="100" lengthAdjust="spacing"> + Shrunk using spacing only. + </text> + <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs"> + Shrunk using spacing and glyphs. + </text> + </g> +</svg></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('SVG_text_fitting_using_lengthAdjust') }}</p> diff --git a/files/ru/web/svg/attribute/letter-spacing/index.html b/files/ru/web/svg/attribute/letter-spacing/index.html new file mode 100644 index 0000000000..4b6adefbc9 --- /dev/null +++ b/files/ru/web/svg/attribute/letter-spacing/index.html @@ -0,0 +1,60 @@ +--- +title: letter-spacing +slug: Web/SVG/Attribute/letter-spacing +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/letter-spacing +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p><span class="seoSummary">Атрибут <code>letter-spacing</code> контролирует расстояние между текстовыми символами, в дополнении к любому расстоянию атрибута {{ SVGAttr("kerning") }} .</span></p> + +<p>Для SVG, если значением атрибута выступает обыкновенное число (например, <code>128</code>), браузер добавляет это к <a href="/en/SVG/Content_type#Length"><length></a> в текущей системе координат пользователя.</p> + +<p>Если же значением атрибута выступают относительные величины, к примеру <code>.25em</code> или <code>1%</code>, браузер преобразовывает их в <a href="/en/SVG/Content_type#Length"><length></a> соответствующее значение в текущей системе координат пользователя.</p> + +<p>В качестве атрибута представления он также может использоваться как свойство в CSS. Смотрите {{ cssxref("letter-spacing","CSS letter-spacing") }} для дополнительной информации.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>normal | <a href="/en/SVG/Content_type#Length"><length></a> | <strong title="this is the default value">inherit</strong></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/text.html#LetterSpacingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Length") }}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>В следующих элементах можно использовать атрибут <code>letter-spacing</code></p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements">Элементы текстового контента</a>, например <code><text></code> и <code><tspan></code>.</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ cssxref("letter-spacing","CSS letter-spacing") }}</li> +</ul> + +<h2 id="Примечание_об_использовании">Примечание об использовании</h2> + +<p>Атрибут <code>letter-spacing</code> плохо поддерживается в работе с SVG. По состоянию на май 2016 года Firefox делает текст без использования <code>letter-spacing</code>. Chrome делает текст с уже буквенным интервалом, но неправильно вычисляет длину текста; <code>textNode.getComputedTextLength()</code> возвращает точно такую же длину, <code>letter-spacing</code> установлен или нет, что приводит к грубо неправильным результатам при разнесении букв.</p> diff --git a/files/ru/web/svg/attribute/lighting-color/index.html b/files/ru/web/svg/attribute/lighting-color/index.html new file mode 100644 index 0000000000..812328afef --- /dev/null +++ b/files/ru/web/svg/attribute/lighting-color/index.html @@ -0,0 +1,50 @@ +--- +title: lighting-color +slug: Web/SVG/Attribute/lighting-color +tags: + - SVG + - SVG атрибуты + - SVG фильтры +translation_of: Web/SVG/Attribute/lighting-color +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Атрибут <code>lighting-color</code> определяет цвет источника света для примитивов фильтров {{ SVGElement("feDiffuseLighting") }} и {{ SVGElement("feSpecularLighting") }}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>currentColor | <a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | <a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a> | inherit</td> + </tr> + <tr> + <th scope="row">Начальное значение</th> + <td>white</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/filters.html#LightingColorProperty" title="http://www.w3.org/TR/SVG11/filters.html#LightingColorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>lighting-color</code></p> + +<ul> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/onload/index.html b/files/ru/web/svg/attribute/onload/index.html new file mode 100644 index 0000000000..b6a5d49ea2 --- /dev/null +++ b/files/ru/web/svg/attribute/onload/index.html @@ -0,0 +1,5 @@ +--- +title: onload +slug: Web/SVG/Attribute/onload +--- +<p>Link not exist</p> diff --git a/files/ru/web/svg/attribute/overflow/index.html b/files/ru/web/svg/attribute/overflow/index.html new file mode 100644 index 0000000000..46449f0919 --- /dev/null +++ b/files/ru/web/svg/attribute/overflow/index.html @@ -0,0 +1,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") }}, который определяет эквивалентный прямоугольник, и затем указанию <url> этого элемента {{ 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>, как определено вn 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" title="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> diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.html b/files/ru/web/svg/attribute/patterncontentunits/index.html new file mode 100644 index 0000000000..a47a9e4480 --- /dev/null +++ b/files/ru/web/svg/attribute/patterncontentunits/index.html @@ -0,0 +1,52 @@ +--- +title: patternContentUnits +slug: Web/SVG/Attribute/patternContentUnits +translation_of: Web/SVG/Attribute/patternContentUnits +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Атрибут <code>patternContentUnits</code> определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметье, что этот аттрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определен на {{ SVGElement("pattern") }} элементе.</p> + +<p>Если <code>patternContentUnits</code> аттрибут не определен, то его значение предполагается равным <code>userSpaceOnUse</code>.</p> + +<p>Заметье, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах аттрибуты контента . Это означает, что, если вы задаете значение <code>patternContentUnits</code> равным <code>objectBoundingBox</code>, значения, указанные в процентах, будут пересчитаны, как если бы вы задали <code>userSpaceOnUse</code>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>userSpaceOnUse</code> | <code><strong>objectBoundingBox</strong></code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElementPatternContentUnitsAttribute" title="http://www.w3.org/TR/SVG11/pservers.html#PatternElementPatternContentUnitsAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>userSpaceOnUse</dt> + <dd>Пользовательская система координат {{ SVGElement("pattern") }} element is the coordinate system that results from taking the current user coordinate system in place at the time when the {{ SVGElement("pattern") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("pattern") }} element via a {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} attribute) and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.</dd> + <dt>objectBoundingBox</dt> + <dd>Пользовательская система координат для содержимого {{ SVGElement("pattern") }} элемента is established using the bounding box of the element to which the pattern is applied and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Атрибут <code>patternContentUnits</code> может быть определен на следующих элементах:</p> + +<ul> + <li>{{ SVGElement("pattern") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/r/index.html b/files/ru/web/svg/attribute/r/index.html new file mode 100644 index 0000000000..1f92d75024 --- /dev/null +++ b/files/ru/web/svg/attribute/r/index.html @@ -0,0 +1,129 @@ +--- +title: r +slug: Web/SVG/Attribute/r +translation_of: Web/SVG/Attribute/r +--- +<div>{{SVGRef}}</div> + +<div>Атрибут r устанавливает значение радиуса круга.</div> + +<div> </div> + +<p>Этот атрибут используют два элемента: {{SVGElement("circle")}}, и {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> + <radialGradient r="0" id="myGradient000"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + <radialGradient r="50%" id="myGradient050"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + <radialGradient r="100%" id="myGradient100"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + + <circle cx="50" cy="50" r="0"/> + <circle cx="150" cy="50" r="25"/> + <circle cx="250" cy="50" r="50"/> + + <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" /> + <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" /> + <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" /> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="circle">circle</h2> + +<p>Для {{SVGElement('circle')}}, <code>r</code> устанавливает радиус окружности и, следовательно, её размер. При значении, меньшем или равном нулю, круг не будет нарисован.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong>| <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row"> + <p dir="ltr">Значение по умолчанию</p> + </th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Анимируемость</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <strong>r</strong> является свойством геометрии, означающим, что этот атрибут также может использоваться как CSS-свойство для кругов.</p> + +<h2 id="radialGradient">radialGradient</h2> + +<p>Для {{ SVGElement("radialGradient") }}, <code>r</code> устанавливает радиус конечной окружности радиального градиента.</p> + +<p>Градиент будет нарисован таким образом, чтобы <strong>100%</strong> конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведет к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента {{ SVGElement("stop") }}.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">Анимируемость</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#R", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> + <p dir="ltr" id="tw-target-text">Определение как свойство геометрии</p> + + <p> </p> + </td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определение для SVG2 серверов рисования <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Исходное определение для <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Исходное определение для <code><circle></code></td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/svg/attribute/repeatcount/index.html b/files/ru/web/svg/attribute/repeatcount/index.html new file mode 100644 index 0000000000..ad584e3305 --- /dev/null +++ b/files/ru/web/svg/attribute/repeatcount/index.html @@ -0,0 +1,47 @@ +--- +title: repeatCount +slug: Web/SVG/Attribute/repeatCount +translation_of: Web/SVG/Attribute/repeatCount +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Данный атрибут задает, сколько раз должна выполняться анимация.</p> + +<p>Значение атрибута определяет количество итераций. Принимаются числа с плавающей точкой, которые интерпретируются как доля итерации. Значение должно быть больше нуля.</p> + +<p>Возможно также определить бесконечную зацикленную анимацию с помощью ключевого слова "indefinite".</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут времени анимации</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a> | "indefinite"</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/SVG/animate.html#RepeatCountAttribute" title="http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Number") }}</p> + +<h2 id="Пример">Пример</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Данные элементы могут использовать атрибут <font face="Consolas, Liberation Mono, Courier, monospace">repeatCount</font></p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> +</ul> diff --git a/files/ru/web/svg/attribute/rx/index.html b/files/ru/web/svg/attribute/rx/index.html new file mode 100644 index 0000000000..78f0ab86e0 --- /dev/null +++ b/files/ru/web/svg/attribute/rx/index.html @@ -0,0 +1,115 @@ +--- +title: rx +slug: Web/SVG/Attribute/rx +tags: + - SVG атрибуты +translation_of: Web/SVG/Attribute/rx +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>rx</code></strong> определяет радиус круга по оси x.</p> + +<p>Два элемента используют этот атрибут: {{SVGElement("ellipse")}} и {{SVGElement("rect")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> + <ellipse cx="50" cy="50" rx="0" ry="25" /> + <ellipse cx="150" cy="50" rx="25" ry="25" /> + <ellipse cx="250" cy="50" rx="50" ry="25" /> + + <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> + <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> + <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="ellipse">ellipse</h2> + +<p>Для элемента {{SVGElement('ellipse')}} rx определяет радиус фигуры по оси x. Если значение меньше или равно 0, эллипс не будет нарисован вообще.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>rx</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.</p> + +<h2 id="rect">rect</h2> + +<p>Для {{SVGElement('rect')}}, <code>rx</code> определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.</p> + +<p>Способ интерпретации значения атрибута <code>rx</code> зависит как от атрибута {{SVGAttr("ry")}} , так и от ширины прямоугольника:</p> + +<ul> + <li>Если правильно задано значение для <code>rx</code>, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li> + <li>Если ни <code>rx</code>, ни {{SVGAttr("ry")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li> + <li>Если <code>rx</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>rx</code> половиной ширины прямоугольника.</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>rx</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для rect.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#RX", "rx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определяется как свойство геометрии</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementRXAttribute", "rx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td> + <p>Начальное определение для <span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-size: 1rem; font-style: inherit; font-weight: inherit; letter-spacing: -0.00278rem;'><ellipse></span></p> + </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#RectElementRXAttribute", "rx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Начальное определение для <code><rect></code></td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/svg/attribute/ry/index.html b/files/ru/web/svg/attribute/ry/index.html new file mode 100644 index 0000000000..f0b87c7a46 --- /dev/null +++ b/files/ru/web/svg/attribute/ry/index.html @@ -0,0 +1,113 @@ +--- +title: ry +slug: Web/SVG/Attribute/ry +tags: + - SVG атрибуты +translation_of: Web/SVG/Attribute/ry +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>ry</code></strong> определяет радиус круга по оси y.</p> + +<p>Два элемента используют этот атрибут: <a href="https://developer.mozilla.org/ru/docs/Web/SVG/Element/ellipse" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code><ellipse></code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/SVG/Element/rect" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code><rect></code></a></p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> + <ellipse cx="50" cy="50" ry="0" rx="25" /> + <ellipse cx="150" cy="50" ry="25" rx="25" /> + <ellipse cx="250" cy="50" ry="50" rx="25" /> + + <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> + <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> + <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="ellipse">ellipse</h2> + +<p>Для элемента {{SVGElement('ellipse')}}, <code>ry</code> определяет радиус фигуры по оси y. Если значение меньше или равно 0, эллипс не будет нарисован вообще.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>ry</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.</p> + +<h2 id="rect">rect</h2> + +<p>Для {{SVGElement('rect')}}, <code>ry</code> определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.</p> + +<p>Способ интерпретации значения атрибута <code>ry</code> зависит как от атрибута {{SVGAttr("rx")}} , так и от ширины прямоугольника:</p> + +<ul> + <li>Если правильно задано значение для <code>ry</code>, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li> + <li>Если ни <code>ry</code>, ни {{SVGAttr("rx")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li> + <li>Если <code>ry</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>ry</code> половиной ширины прямоугольника.</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>ry</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для rect.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#RY", "ry")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определяется как свойство геометрии</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementRYAttribute", "ry")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Начальное определение для <code><ellipse></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#RectElementRYAttribute", "ry")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Начальное определение для <code><rect></code></td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.html new file mode 100644 index 0000000000..d36ed47bef --- /dev/null +++ b/files/ru/web/svg/attribute/shape-rendering/index.html @@ -0,0 +1,79 @@ +--- +title: shape-rendering +slug: Web/SVG/Attribute/shape-rendering +translation_of: Web/SVG/Attribute/shape-rendering +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="/ru/docs/Web/SVG/Attribute">Справочник SVG атрибутов</a></p> + +<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. <code>shape-rendering</code> предоставляет возможность указывать даные рекомендации.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значения</th> + <td><strong title="this is the default value">auto</strong> | optimizeSpeed | crispEdges | geometricPrecision | 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/painting.html#ShapeRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>auto</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> <span class="hps">внести соответствующие</span> <span class="hps">компромиссы</span><span>, чтобы сбалансировать</span> <span class="hps">скорость рендеринга,</span> <span class="hps">четкие края</span> <span class="hps">и</span> <span class="hps">геометрическую</span> <span class="hps">точность</span><span>, но </span><span class="hps">геометрической точности</span> <span class="hps">уделять более пристальное внимание</span><span>, чем</span> <span class="hps">скорости и</span> <span class="hps">четким краями</span><span>.</span></span></dd> + <dt>optimizeSpeed</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен</span> акцентироваться на <span class="hps">скорость рендеринга, в ущерб</span> <span class="hps">геометрической</span> <span class="hps">точности и</span> <span class="hps">четким краями</span><span>.</span> <span class="hps">Эту опцию</span> также можно<span class="hps"> указывать,</span><span>, чтобы отключить</span> <span class="hps">сглаживание фигур</span><span>.</span></span></dd> + <dt>crispEdges</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен попытаться</span> акцентировать <span class="hps">на контрасте</span> <span class="hps">чистых</span> <span class="hps">краев</span> рисунков, в ущерб<span class="hps"> скорости</span> <span class="hps">рендеринга</span> <span class="hps">и геометрической</span> <span class="hps">точности.</span> <span class="hps">Для достижения</span> наилучшего результата четкости<span class="hps"> края</span><span>, браузер</span><span class="hps"> может</span> <span class="hps">отключить</span> <span class="hps">сглаживание для</span> <span class="hps">всех</span> <span class="hps">линий и кривых</span> <span class="hps">или, возможно,</span> <span class="hps">только для</span> <span class="hps">прямых</span><span>, близких к</span> <span class="hps">вертикальным или горизонтальным.</span> <span class="hps">Кроме того,</span> <span class="hps">браузер может</span> <span class="hps">скорректировать позиции</span> <span class="hps">строк и</span> <span class="hps">ширину линий</span> <span class="hps">для выравнивания</span> <span class="hps">краев</span> <span class="hps">с</span> <span class="hps">пикселями устройства</span><span>.</span></span></dd> + <dt>geometricPrecision</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> акцентировать <span class="hps">геометрическую</span> <span class="hps">точность в ущерб</span> <span class="hps">скорости и</span> <span class="hps">четкими краям</span></span>.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="100" height="100" + shape-rendering="optimizeSpeed"></pre> + +<table class="standard-table"> + <tbody> + <tr> + <td> + <p>shape-rendering: geometricPrecision:</p> + + <p><img alt="shape-rendering:geometricPrecision" src="http://download.g63.ru/svg/shape-rendering-geometricPrecision.svg" style="height: 210px; width: 200px;"></p> + </td> + <td> + <p>shape-rendering: optimizeSpeed</p> + + <p><img alt="shape-rendering:optimizeSpeed" src="http://download.g63.ru/svg/shape-rendering-optimizeSpeed.svg" style="height: 210px; width: 200px;"></p> + </td> + </tr> + </tbody> +</table> + +<p>Также можно воспользоваться css shape-rendering:</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="100" height="100" + style="shape-rendering:optimizeSpeed;"></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>shape-rendering</code></p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> +</ul> diff --git a/files/ru/web/svg/attribute/stop-color/index.html b/files/ru/web/svg/attribute/stop-color/index.html new file mode 100644 index 0000000000..09a0503a48 --- /dev/null +++ b/files/ru/web/svg/attribute/stop-color/index.html @@ -0,0 +1,51 @@ +--- +title: stop-color +slug: Web/SVG/Attribute/stop-color +translation_of: Web/SVG/Attribute/stop-color +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="/ru/docs/Web/SVG/Attribute">Справочник SVG атрибутов</a></p> + +<p>Атрибут <code>stop-color</code> указывает какой цвет использовать при остановке градиента. Значения <code>currentColor</code> и ICC цвета могут быть заданы так же, как в <a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a> спецификации для атрибутов {{ SVGAttr("fill") }} и {{ SVGAttr("stroke") }}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>currentColor | <a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | <a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a> | inherit</td> + </tr> + <tr> + <th scope="row">Начальное значение</th> + <td>black</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/pservers.html#StopColorProperty" title="http://www.w3.org/TR/SVG11/pservers.html#StopColorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>stop-color</code></p> + +<ul> + <li>{{ SVGElement("stop") }}</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также </h2> + +<ul> + <li>{{ SVGAttr("stop-opacity") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/stroke-dashoffset/index.html b/files/ru/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..6f9462e40f --- /dev/null +++ b/files/ru/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,162 @@ +--- +title: stroke-dashoffset +slug: Web/SVG/Attribute/stroke-dashoffset +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/stroke-dashoffset +--- +<div class="blockIndicator note"> +<p><strong>Прежняя редакция:</strong> « <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a><br> + Этот атрибут определяет смещение обводки относительно начального положения.<br> + При использовании <a href="/ru/SVG/Content_type#Percentage" title="ru/SVG/Content_type#Percentage"><percentage></a>, значение будет вычисляться от текущего viewport.<br> + Значение может быть отрицательным.</p> +</div> + +<p>{{SVGRef}}<br> + Атрибут <strong><code>stroke-dashoffset</code></strong> определяет сдвиг массива <strong>dash array </strong>относительно начального положения.</p> + +<p class="note"><strong>Сноска:</strong> Атрибут <code>stroke-dashoffset</code> может использоваться как свойство CSS.</p> + +<p>Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} </p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> + <!-- Без dash array --> + <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> + + <!-- Без dash offset --> + <line x1="0" y1="3" x2="30" y2="3" stroke="black" + stroke-dasharray="3 1" /> + + <!-- + Начало dash array тянет 3 отрезка + --> + <line x1="0" y1="5" x2="30" y2="5" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="3" /> + + <!-- + Начало dash array толкает 3 отрезка + --> + <line x1="0" y1="7" x2="30" y2="7" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="-3" /> + + <!-- + Начало dash array тянет 1 отрезок с финишем в том же рендеринге, + что и в предыдущем примере + --> + <line x1="0" y1="9" x2="30" y2="9" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="1" /> + + <!-- + красным выделено смещение dash array для каждой строки + --> + <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> +</svg> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут оформления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a> | inherit</td> + </tr> + <tr> + <th scope="row">Исходное значение</th> + <td>0</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/painting.html#StrokeDashoffsetProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="200" height="230" viewBox="0 0 200 200" +version="1.1" xmlns="http://www.w3.org/2000/svg"> + <line stroke-dasharray="20, 5" x1="10" y1="10" x2="190" y2="10" /> + <!-- + Поскольку размер штриха 20 с разрывами 5, + добавление смещения dash-offset 20 приводит к тому, + что линия начинается с разрыва. + --> + <line stroke-dashoffset="20" stroke-dasharray="20, 5" + x1="10" y1="30" x2="190" y2="30" /> + <!-- + Добавление смещения штрихов на 10% приводит к началу линии с разрывом там же, + потому что элемент svg имеет ширину области просмотра 200. + Меняя размер svg, меняется и значение в пикселях stroke-dashoffset. + --> + <line stroke-dashoffset="10%" stroke-dasharray="20, 5" + x1="10" y1="50" x2="190" y2="50" /> + <line stroke-dashoffset="10" stroke-dasharray="20, 5" + x1="10" y1="70" x2="190" y2="70" /> + + <line stroke-dashoffset="100" stroke-dasharray="200" + x1="10" y1="90" x2="190" y2="90" /> + <line stroke-dashoffset="100" stroke-dasharray="100" + x1="10" y1="110" x2="190" y2="110" /> + <!-- + Без stroke-dasharray - stroke-dashoffset не даст никакого эффекта. + --> + <line stroke-dashoffset="50" x1="10" y1="130" x2="190" y2="130" /> + <!-- + stroke-dashoffset values can be negative and as expected offest + in the opposite direction as a positive value. + Значения смещения штрихов могут быть отрицательными + с направлением, обратным положительному значению. + --> + <line stroke-dashoffset="-40" stroke-dasharray="80" + x1="10" y1="150" x2="190" y2="150" /> + <line stroke-dasharray="80" + x1="10" y1="170" x2="190" y2="170" /> + <line stroke-dashoffset="-10%" stroke-dasharray="65, 5, 1, 5" + x1="10" y1="190" x2="190" y2="190" /> + <line stroke-dasharray="65, 5, 1, 5" x1="10" y1="210" x2="190" y2="210" /> + <style><![CDATA[ + line{ + stroke: black; + stroke-width: 2; + } + ]]> + </style> +</svg> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Пример', '220', '240')}}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>stroke-dashoffset</code></p> + +<ul> + <li><a href="/ru/SVG/Element#Shape" title="ru/SVG/Element#Shape">Элементы форм</a> »</li> + <li><a href="/ru/SVG/Element#TextContent" title="ru/SVG/Element#TextContent">Текстовые элементы</a> »</li> +</ul> diff --git a/files/ru/web/svg/attribute/stroke-linecap/index.html b/files/ru/web/svg/attribute/stroke-linecap/index.html new file mode 100644 index 0000000000..475dbb5a0b --- /dev/null +++ b/files/ru/web/svg/attribute/stroke-linecap/index.html @@ -0,0 +1,194 @@ +--- +title: stroke-linecap +slug: Web/SVG/Attribute/stroke-linecap +translation_of: Web/SVG/Attribute/stroke-linecap +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>stroke-linecap</code></strong> - это атрибут представления, определяющий форму, которая будет использоваться в конце открытых подпутей при штриховании.</p> + +<p class="note"><strong>Сноска: </strong>В качестве атрибута представления можно использовать <code>stroke-linecap</code> в качестве свойства CSS.</p> + +<p>В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + + <!-- Effect of the (default) "butt" value --> + <line x1="1" y1="1" x2="5" y2="1" stroke="black" + stroke-linecap="butt" /> + + <!-- Effect of the "round" value --> + <line x1="1" y1="3" x2="5" y2="3" stroke="black" + stroke-linecap="round" /> + + <!-- Effect of the "square" value --> + <line x1="1" y1="5" x2="5" y2="5" stroke="black" + stroke-linecap="square" /> + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /> +</svg> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Нотации">Нотации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>butt</code> | <code>round</code> | <code>square</code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>butt</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="butt">butt</h3> + +<p>Значение <code>butt</code> указывает границу каждого подпути и не выходит за пределы двух его конечных точек. На подпути нулевой длины путь не будет отображаться вообще.</p> + +<h4 id="Пример">Пример</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> + + <!-- Effect of the "butt" value --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="butt" /> + + <!-- Effect of the "butt" value on a zero length path --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="butt" /> + + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + <circle cx="1" cy="1" r="0.05" fill="pink" /> + <circle cx="5" cy="1" r="0.05" fill="pink" /> + <circle cx="3" cy="3" r="0.05" fill="pink" /> +</svg> +</pre> + +<p>{{EmbedLiveSample('butt', '100%', 200)}}</p> + +<h3 id="round">round</h3> + +<p>Значение <code>round</code> указывает на то, что в конце каждого подпути обводка будет расширена на полукруг с диаметром, равным ширине обводки. На подпути нулевой длины обводка состоит из полного круга с центром в точке подпути.</p> + +<h4 id="Пример_2">Пример</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> + + <!-- Effect of the "round" value --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="round" /> + + <!-- Effect of the "round" value on a zero length path --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="round" /> + + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + <circle cx="1" cy="1" r="0.05" fill="pink" /> + <circle cx="5" cy="1" r="0.05" fill="pink" /> + <circle cx="3" cy="3" r="0.05" fill="pink" /> +</svg> +</pre> + +<p>{{EmbedLiveSample('round', '100%', 200)}}</p> + +<h3 id="square">square</h3> + +<p>Значение <code>square</code> указывает, что в конце каждого подпути обводка будет расширена прямоугольником с шириной, равной половине ширины обводки, и высотой, равной ширине обводки. На подпути с нулевой длиной обводка состоит из квадрата, ширина которого равна ширине обводки, с центром в точке подпути.</p> + +<h4 id="Пример_3">Пример</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> + + <!-- Effect of the "square" value --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="square" /> + + <!-- Effect of the "square" value on a zero length path --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="square" /> + + + <!-- + the following pink lines highlight the + position of the path for each stroke + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + <circle cx="1" cy="1" r="0.05" fill="pink" /> + <circle cx="5" cy="1" r="0.05" fill="pink" /> + <circle cx="3" cy="3" r="0.05" fill="pink" /> +</svg> +</pre> + +<p>{{EmbedLiveSample('square', '100%', 200)}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузера</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных.<br> +Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на их получение.</div> + +<p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коммент</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and texts</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and texts</td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/svg/attribute/stroke-width/index.html b/files/ru/web/svg/attribute/stroke-width/index.html new file mode 100644 index 0000000000..0359c2a1a2 --- /dev/null +++ b/files/ru/web/svg/attribute/stroke-width/index.html @@ -0,0 +1,57 @@ +--- +title: stroke-width +slug: Web/SVG/Attribute/stroke-width +translation_of: Web/SVG/Attribute/stroke-width +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Атрибут <code>stroke-width</code> указывает ширину контура текущего объекта. Его значение по умолчанию: 1. Если используется <percentage>, значение представляет собой процент от текущего окна просмотра. Если используется значение 0, контур не будет нарисован.<br> + <br> + В качестве атрибута представления он также может использоваться как свойство непосредственно внутри таблицы стилей CSS</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row"><strong>Категория</strong></th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row"><strong>Значения</strong></th> + <td><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a> | <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | inherit</td> + </tr> + <tr> + <th scope="row"><strong>Анимируемый</strong></th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <circle cx="100" cy="100" r="100" /> +</svg> +<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <circle cx="100" cy="100" r="100" stroke="#ff0" stroke-width="10" /> +</svg></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Example', 200, 200)}}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>stroke-width</code>.</p> + +<ul> + <li><a href="/ru/SVG/Element#Shape" title="en/SVG/Element#Shape">Элементы форм</a> »</li> + <li><a href="/ru/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Текстовые элементы</a> »</li> +</ul> diff --git a/files/ru/web/svg/attribute/stroke/index.html b/files/ru/web/svg/attribute/stroke/index.html new file mode 100644 index 0000000000..d6ddd0420a --- /dev/null +++ b/files/ru/web/svg/attribute/stroke/index.html @@ -0,0 +1,69 @@ +--- +title: stroke +slug: Web/SVG/Attribute/stroke +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/stroke +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — <strong>None</strong>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Значения</th> + <td> + <p><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a>, <code>context-fill</code>, <code>context-stroke</code></p> + </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/SVG/painting.html#StrokeProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="SVG_Line" name="SVG_Line">SVG Line с stroke</h3> + +<h4 id="Пример_1_Нарисуйте_прямую_зеленую_линию_используя_stroke.">Пример 1: Нарисуйте прямую зеленую линию, используя <strong>stroke</strong>.</h4> + +<pre class="brush: html"><svg height="50" width="300"> + <path stroke="green" d="M5 20 1215 0" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example1_Draw_straight_green_line_using_stroke.', '300', '50', '', 'Web/SVG/Attribute/stroke')}}</p> + +<h4 id="Пример_2_Нарисуйте_черный_круг_с_синей_рамкой_используя_stroke.">Пример 2: Нарисуйте черный круг с синей рамкой используя stroke.</h4> + +<pre class="brush: html"><svg height="100" width="100"> + <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example2_Draw_black_circle_with_blue_border_using_stroke.', '100', '120', '', 'Web/SVG/Attribute/stroke')}}</p> + +<h2 id="Использование_context-stroke">Использование <code>context-stroke</code></h2> + +<p>Информацию об использовании значения нестандартного и ограниченного <code>context-stroke</code> (и <code>context-fill</code>) смотреть в документации для свойства {{cssxref("-moz-context-properties")}}.</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>stroke</code>.</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.html new file mode 100644 index 0000000000..4a034cfde2 --- /dev/null +++ b/files/ru/web/svg/attribute/text-anchor/index.html @@ -0,0 +1,107 @@ +--- +title: text-anchor +slug: Web/SVG/Attribute/text-anchor +translation_of: Web/SVG/Attribute/text-anchor +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Справочник SVG Аттрибутов</a></p> + +<p>Атрибут <code>text-anchor</code> используется для выравнивания<br> + <em>(start-, middle- или end-выравнивание)</em> текстовой строки относительно заданной точки.</p> + +<p><strong id="docs-internal-guid-4ea05241-81fa-9da9-3d12-af90b8ff4e53">А</strong>трибут <code>text-anchor</code> применяется к каждому отдельному текстовому фрагменту в заданном {{ SVGElement("text") }} элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения {{ SVGAttr("x") }} и {{ SVGAttr("y") }} атрибутов к {{ SVGElement("text") }} элементу, любого {{ SVGAttr("x") }} или {{ SVGAttr("y") }} значения к {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} , {{ SVGElement("altGlyph") }} элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для {{ SVGElement("textPath") }} элемента. </p> + +<p>Как артирубт представления, он так же может быть использован как свойство непосредственно в CSS стилях.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>start | middle | end | <strong title="this is the default value">inherit</strong></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/SVG/text.html#TextAnchorProperty" title="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>start</dt> + <dd> + <p>Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиаского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.</p> + </dd> + <dt>middle</dt> + <dd> + <p>Отрисованные символы выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка<br> + между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой<br> + позиции.)</p> + </dd> + <dt>end</dt> + <dd>Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалетно<br> + правому выраниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.</dd> + <dt>Примечание</dt> + <dd>В <strong>IE</strong>-11 атрибут <code><strong>text-anchor</strong></code> не имеет эффекта при привязке текста к заданному пути <strong><code>path</code></strong> посредством тега <code><strong>textPath</strong></code>.<br> + В приведенном ниже примере тег <strong><code>path</code></strong> использовался только лишь для отрисовки линий и с расположением текста никак не связан.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre><html> +<head> + <meta charset="utf-8"> + <title>текст в якорях</title> +</head> +<body> +<div style="background-color:burlywood; width:866px;height:444px;display:flex;"> + <div style="background-color:greenyellow; width:333px;height:333px;margin:22px;overflow: visible;"> + <svg viewBox="-50 0 100 100" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <!-- Материализация якорей --> + <path d="M50, 5 L50,95 + M20,20 L80,20 + M20,50 L80,50 + M20,80 L80,80" stroke="grey"/> + + <!-- Якоря в действии --> + <text text-anchor="start" x="50" y="20">some start</text> + <text text-anchor="start" x="50" y="35">start</text> + + <text text-anchor="middle" x="50" y="55">some middle</text> + <text text-anchor="middle" x="50" y="70">middle</text> + + <text text-anchor="end" x="50" y="85">some end</text> + <text text-anchor="end" x="50" y="100">end</text> + </svg> + </div> +</div> +</body> +</html></pre> + +<p><strong>Песочницы</strong></p> + +<p>{{ EmbedLiveSample('Пример','400','400') }}</p> + + + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать <code>text-anchor</code> атрибут</p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузера</h2> + + + +<p>{{Compat("svg.attributes.presentation.text-anchor")}}</p> diff --git a/files/ru/web/svg/attribute/text-rendering/index.html b/files/ru/web/svg/attribute/text-rendering/index.html new file mode 100644 index 0000000000..11c0bdb8cf --- /dev/null +++ b/files/ru/web/svg/attribute/text-rendering/index.html @@ -0,0 +1,87 @@ +--- +title: text-rendering +slug: Web/SVG/Attribute/text-rendering +translation_of: Web/SVG/Attribute/text-rendering +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. <code>text-rendering</code> предоставляет возможность указывать даные рекомендации.</p> +<p>Помимо presentation attribute, настройки ренедеринга шрифтов можно задавть через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.</p> +<h2 id="Usage_context">Usage context</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><strong title="this is the default value">auto</strong> | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty" title="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> +<dl> + <dt> + auto</dt> + <dd> + Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.</dd> + <dt> + optimizeSpeed</dt> + <dd> + Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб читаемости и геометрической точности. Эту опцию также можно указывать,, чтобы отключить сглаживание (anti-aliasing) текста.</dd> + <dt> + optimizeLegibility</dt> + <dd> + Указывает на то, что браузер должен попытаться акцентировать на читаемости текста, в ущерб скорости рендеринга и геометрической точности. Браузеры часто применяю к тексту сглаживание (anti-aliasing) или встроенные в шрифт хинтинг, или оба способа сразу, чтобы сделать наилучшую читаемость текста.</dd> + <dt> + geometricPrecision</dt> + <dd> + Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб читаемости и скорости рендеринга. Эта опция обычно используется, чтобы отключить использование хинтинга таким образом, чтобы контуры символов рисовались согласно геометрической точности отрисовки заложенных данных.</dd> +</dl> +<h2 id="Пример">Пример</h2> +<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="660" height="40" + text-rendering="optimizeLegibility"> + <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /> + <style> + text {font: 30px 'Sofadi One', cursive;} + </style> + <g> + <text y="30">The quick brown fox jumps over the lazy dog.</text> + </g> +</svg></pre> +<p><strong>optimizeLegibility (первая) и geometricPrecision (вторая)</strong><br> + <img alt="text-rendering=optimizeLegibility" height="13" src="http://download.g63.ru/svg/text-rendering-optimizeLegibility.svg" width="211"><br> + <img alt="text-rendering=geometricPrecision" height="13" src="http://download.g63.ru/svg/text-rendering-geometricPrecision.svg" width="211"></p> +<p>Аналогичным образом действует {{ cssxref("text-rendering","CSS text-rendering") }}</p> +<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="660" height="40"> + <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /> + <style> + text { + font: 30px 'Sofadi One', cursive; + text-rendering:optimizeLegibility; + } + </style> + <g> + <text y="30">The quick brown fox jumps over the lazy dog.</text> + </g> +</svg></pre> +<h2 id="Elements">Elements</h2> +<p>The following elements can use the <code>text-rendering</code> attribute</p> +<ul> + <li>{{ SVGElement("text") }}</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li>{{ cssxref("text-rendering","CSS text-rendering") }}</li> +</ul> diff --git a/files/ru/web/svg/attribute/transform/index.html b/files/ru/web/svg/attribute/transform/index.html new file mode 100644 index 0000000000..c202361239 --- /dev/null +++ b/files/ru/web/svg/attribute/transform/index.html @@ -0,0 +1,121 @@ +--- +title: transform +slug: Web/SVG/Attribute/transform +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/transform +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>В атрибуте <code>transform</code> перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><strong title="значение по умолчанию"><transform-list></strong></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/SVG/coords.html#TransformAttribute" title="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h3 id="Типы_преобразований">Типы преобразований</h3> + +<dl> + <dt>matrix(<a> <b> <c> <d> <e> <f>)</dt> + <dd>Преобразование с использованием матрицы из шести элементов. Преобразование <code>matrix(a,b,c,d,e,f)</code> равнозначно применению матрицы <math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics>,</math> которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы: <math display="block"><semantics><mrow><mrow><mo>(</mo><mtable><mtr><mtd><msub><mi>x</mi><mi>пред.</mi></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mi>пред.</mi></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable><mtr><mtd><msub><mi>x</mi><mstyle><mi>нов.</mi></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mi>нов.</mi></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable><mtr><mtd><mi>a</mi><msub><mi>x</mi><mi>нов.</mi></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mi>нов.</mi></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mi>нов.</mi></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mi>нов.</mi></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{пред.}} \\ y_{\mathrm{пред.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{нов.}} \\ y_{\mathrm{нов.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{нов.}} + c y_{\mathrm{нов.}} + e \\ b x_{\mathrm{нов.}} + d y_{\mathrm{нов.}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></dd> + <dt>translate(<x> [<y>])</dt> + <dd>Перенос по осям <code>x</code> и <code>y</code>. Равнозначно <code>matrix(1 0 0 1 x y)</code>. Если значение <code>y</code> опущено, оно принимается равным нулю.</dd> + <dt>scale(<x> [<y>])</dt> + <dd>Масштабирование по осям <code>x</code> и <code>y</code>. Равнозначно <code>matrix(x 0 0 y 0 0)</code>. Если значение <code>y</code> опущено, оно принимается равным <code>x</code>.</dd> + <dt>rotate(<a> [<x> <y>])</dt> + <dd>Поворот на <code>a</code> градусов вокруг указанной точки. Если необязательные параметры <code>x</code> и <code>y</code> опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mo>cos</mo><mi>a</mi></mtd><mtd><mo>-</mo><mo>sin</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo>sin</mo><mi>a</mi></mtd><mtd><mo>cos</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics></math> Если необязательные параметры <code>x</code> и <code>y</code> присутствуют, поворот будет осуществляться вокруг точки <code>(x, y)</code>. Операция равнозначна следующему списку преобразований: <code>translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>)</code>.</dd> + <dt>skewX(<a>)</dt> + <dd>Наклон относительно оси <code>x</code> на <code>a</code> градусов. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mo>tg</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics></math></dd> + <dt>skewY(<a>)</dt> + <dd>Наклон относительно оси <code>y</code> на <code>a</code> градусов. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo>tg</mo><mi>a</mi></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix} </annotation></semantics></math></dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Поворот_и_перенос_SVG-элемента">Поворот и перенос SVG-элемента</h3> + +<p>В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут <code>transform</code>. Первоначальный элемент до преобразования показан полупрозрачным.</p> + +<p>CSS (необязательный):</p> + +<pre class="brush: css">text { + font: 1em sans-serif; +}</pre> + +<p>SVG:</p> + +<pre class="brush: html"><svg width="180" height="200" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Это элемент до применения переноса и поворота --> + <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> </strong>fill-opacity=0.2 stroke-opacity=0.2></rect> + + <!-- Здесь мы добавим текстовый элемент, повернем и перенесем оба элемента --> + <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> transform="translate(30) rotate(45 50 50)"</strong>></rect> + <text x="60" y="105" <strong>transform="translate(30) rotate(45 50 50)"</strong>> Hello Moz! </text> + +</svg> +</pre> + +<p>{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}</p> + +<h3 id="General_Transformation" name="General_Transformation">Общее преобразование</h3> + +<p>Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования <code>matrix(1,2,3,4,5,6)</code> и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.</p> + +<pre class="brush: html"><svg width="160" height="230" xmlns="http://www.w3.org/2000/svg"> + + <g transform="matrix(1,2,3,4,5,6)"> + <!-- Новая система координат (жирная синяя линия) + x1 = 10 | x2 = 30 + y1 = 20 | y2 = 40 + --> + <line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/> + </g> + + <!-- Предыдущая система координат (тонкая белая линия) + x1 = 1 * 10 + 3 * 20 + 5 = 75 | x2 = 1 * 30 + 3 * 40 + 5 = 155 + y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226 + --> + <line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/> + +</svg> +</pre> + +<p>{{ EmbedLiveSample('General_Transformation','200px','250px') }}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>transform</code>:</p> + +<ul> + <li>{{ SVGElement("a") }}</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("use") }}</li> + <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Графические элементы</a> »</li> +</ul> diff --git a/files/ru/web/svg/attribute/values/index.html b/files/ru/web/svg/attribute/values/index.html new file mode 100644 index 0000000000..72929084aa --- /dev/null +++ b/files/ru/web/svg/attribute/values/index.html @@ -0,0 +1,86 @@ +--- +title: values +slug: Web/SVG/Attribute/values +translation_of: Web/SVG/Attribute/values +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Атрибут <code>values</code> имеет два значения в зависимости от используемого контекста.</p> + +<p>Для элементов анимации атрибут <code>values</code> представляет собой разделенный точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список <code>values</code>, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.</p> + +<p>Для элемента {{ SVGElement("feColorMatrix") }} содержимое <code>values</code> зависит от значения атрибута {{ SVGAttr("type") }}:</p> + +<ul> + <li>Для <code>type="matrix"</code>, <code>values</code> — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделенных пробелами и/или запятой.</li> + <li>Для <code>type="saturate"</code>, <code>values</code> — это единственное вещественное число (от 0 до 1).</li> + <li>Для <code>type="hueRotate"</code>, <code>values</code> — это одно вещественное число (градусов).</li> + <li>Для <code>type="luminanceToAlpha"</code>, <code>values</code> не применимы.</li> +</ul> + +<p>Если атрибут не указан, то поведение по умолчанию зависит от значения атрибута {{SVGAttr("type")}}.</p> + +<ul> + <li>Если <code>type="matrix"</code>, этот атрибут по умолчанию присваивается матрице идентификаторов.</li> + <li>Если <code>type="saturate"</code>, то этот атрибут по умолчанию присваивает значение 1, что приводит к получению матрицы идентификаторов.<br> + Если <code>type="hueRotate"</code>, то этот атрибут по умолчанию присваивает значение 0, что приводит к получению матрицы идентификаторов.</li> +</ul> + +<h2 id="Usage_context">Usage context</h2> + +<h3 id="For_animation_elements">For animation elements</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Animation value attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><list></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute" title="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElement(feColorMatrix)_element">For the {{ SVGElement("feColorMatrix") }} element</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><list> | <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint"><number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>values</code> attribute</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> + <li>{{ SVGElement("feColorMatrix") }}</li> +</ul> 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"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- + С относительными единицами, такими как проценты, + размер квадрата не меняется в зависимости от + значения viewBox + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + При больших значениях viewBox круг получается + маленьким, потому что его радиус указан в абсолютных + единицах: расстояние 4 получается маленьким относительно + размера окна 100, указанного во viewBox + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- Также не зависит от viewBox, как и в предыдущем примере --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + С маленьким значением размера viewBox круг получается + большим, потому что радиус 4 намного больше, если размер + области отображения равен 10, чем если он равен 100 + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + Точка с координатами (0, 0) теперь является центром области + отображения. 100% всё ещё приравнивается к полному размеру + области отображения (10 на 10), поэтому квадрат выглядит + сдвинутым в правый нижний угол + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + Так как точка (0, 0) находится в центре, а координаты круга, + равные 50%, относительно размера области отображения (10 на 10) + принимаются равными 5, круг оказывается с центром + в правом нижнем углу + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg></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><marker></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></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"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></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><svg></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></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><symbol></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></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><view></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></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> diff --git a/files/ru/web/svg/attribute/width/index.html b/files/ru/web/svg/attribute/width/index.html new file mode 100644 index 0000000000..30e0e0df21 --- /dev/null +++ b/files/ru/web/svg/attribute/width/index.html @@ -0,0 +1,648 @@ +--- +title: Ширина +slug: Web/SVG/Attribute/width +tags: + - ширина +translation_of: Web/SVG/Attribute/width +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>width</code></strong> определяет горизонтальный размер элементов в пользовательской системе координат.</p> + +<p>Двадцать пять элементов используют эти атрибуты: {{SVGElement('feBlend')}}, {{SVGElement('feColorMatrix')}}, {{SVGElement('feComponentTransfer')}}, {{SVGElement('feComposite')}}, {{SVGElement('feConvolveMatrix')}}, {{SVGElement('feDiffuseLighting')}}, {{SVGElement('feDisplacementMap')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feFlood')}}, {{SVGElement('feGaussianBlur')}}, {{SVGElement('feImage')}}, {{SVGElement('feMerge')}}, {{SVGElement('feMorphology')}}, {{SVGElement('feOffset')}}, {{SVGElement('feSpecularLighting')}}, {{SVGElement('feTile')}}, {{SVGElement('feTurbulence')}}, {{SVGElement('filter')}}, {{SVGElement('foreignObject')}}, {{SVGElement('image')}}, {{SVGElement('mask')}}, {{SVGElement('pattern')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, and {{SVGElement('use')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> + <!-- С шириной равной 0 или меньше, ничего не будет отображаться --> + <rect x="0" y="0" width="0" height="90"/> + <rect x="0" y="100" width="60" height="90"/> + <rect x="0" y="200" width="100%" height="90"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="feBlend">feBlend</h2> + +<p>Для {{SVGElement('feBlend')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feColorMatrix">feColorMatrix</h2> + +<p>Для {{SVGElement('feColorMatrix')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feComponentTransfer">feComponentTransfer</h2> + +<p>Для {{SVGElement('feComponentTransfer')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feComposite">feComposite</h2> + +<p>Для {{SVGElement('feComposite')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feConvolveMatrix">feConvolveMatrix</h2> + +<p>Для {{SVGElement('feConvolveMatrix')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feDiffuseLighting">feDiffuseLighting</h2> + +<p>Для {{SVGElement('feDiffuseLighting')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feDisplacementMap">feDisplacementMap</h2> + +<p>Для {{SVGElement('feDisplacementMap')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feDropShadow">feDropShadow</h2> + +<p>Для {{SVGElement('feDropShadow')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feFlood">feFlood</h2> + +<p>Для {{SVGElement('feFlood')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feGaussianBlur">feGaussianBlur</h2> + +<p>Для {{SVGElement('feGaussianBlur')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feImage">feImage</h2> + +<p>Для {{SVGElement('feImage')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feMerge">feMerge</h2> + +<p>Для {{SVGElement('feMerge')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feMorphology">feMorphology</h2> + +<p>Для {{SVGElement('feMorphology')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feOffset">feOffset</h2> + +<p>Для {{SVGElement('feOffset')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feSpecularLighting">feSpecularLighting</h2> + +<p>Для {{SVGElement('feSpecularLighting')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feTile">feTile</h2> + +<p>Для {{SVGElement('feTile')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feTurbulence">feTurbulence</h2> + +<p>Для {{SVGElement('feTurbulence')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="filter">filter</h2> + +<p>Для {{SVGElement('filter')}}, <code>width</code> определяет горизонтальный размер для отображения области фильтров.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>120%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="foreignObject">foreignObject</h2> + +<p>Для {{SVGElement('foreignObject')}}, <code>width</code> определяет горизонтальный размер для отображения области ссылочных документов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (рассматривается как <code>0</code>)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для <code><foreignObject></code>.</p> + +<h2 id="image">image</h2> + +<p>Для {{SVGElement('image')}}, <code>width</code> определяет горизонтальный размер для изображения.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (рассматривается как ширина изображения)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для изображений.</p> + +<h2 id="mask">mask</h2> + +<p>Для {{SVGElement('mask')}}, <code>width</code> определяет горизонтальный размер области эффекта. Точный эффект этого атрибута зависит от атрибута {{SVGAttr('maskUnits')}}.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>120%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="pattern">pattern</h2> + +<p>Для {{SVGElement('pattern')}}, <code>width</code> определяет горизонтальный размер мастящегося паттерна. Точный эффект этого атрибута зависит от атрибутов {{SVGAttr('patternUnits')}} и {{SVGAttr('patternTransform')}}.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значание</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="rect">rect</h2> + +<p>Для {{SVGElement('rect')}}, <code>width</code> определяет горизонтальный размер прямоугольника.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (пассматривается как <code>0</code>)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для прямоугольника.</p> + +<h2 id="svg">svg</h2> + +<p>Для {{SVGElement('svg')}}, <code>width</code> определяет горизонтальный размер отображаемой области вьюпорта SVG.</p> + +<p class="note"><strong>Примечание:</strong> В HTML документе, если оба атрибута {{SVGAttr('viewBox')}} и <code>width</code> опущены, <a href="https://svgwg.org/specs/integration/#svg-css-sizing">svg-элемент будет отображаться с шириной <code>300px</code></a></p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (рассматривается как <code>100%</code>)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для <code><svg></code>.</p> + +<h2 id="use">use</h2> + +<p>Для {{SVGElement('use')}}, <code>width</code> определяет горизонтальный размер для ссылочного элемента.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (рассматривается как <code>0</code>)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для использоавнных элементов.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментаий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Filters 1.0', '#element-attrdef-filter-width', 'width') }}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td>Определение для<code> <filter></code></td> + </tr> + <tr> + <td>{{ SpecName('Filters 1.0', '#element-attrdef-filter-primitive-width', 'width') }}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td>Определение для фильтр-примитивов</td> + </tr> + <tr> + <td>{{SpecName("CSS Masks", "#element-attrdef-mask-width", 'width')}}</td> + <td>{{Spec2("CSS Masks")}}</td> + <td>Определение для <code><mask></code></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "geometry.html#Sizing", "width")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определено как геометрическое свойство</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#PatternElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определение для <code><pattern></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "extend.html#ForeignObjectElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><foreignObject></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#PatternElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><pattern></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#ImageElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><image></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#SVGElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><svg></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#UseElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><use></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#FilterElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><filter></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#FilterPrimitiveWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для фильтр-примитивов</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "masking.html#MaskElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><mask></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#RectElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><rect></code></td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/svg/attribute/x/index.html b/files/ru/web/svg/attribute/x/index.html new file mode 100644 index 0000000000..d5b6a83a6a --- /dev/null +++ b/files/ru/web/svg/attribute/x/index.html @@ -0,0 +1,86 @@ +--- +title: x +slug: Web/SVG/Attribute/x +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/x +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Этот атрибут указывает координату оси <strong><code>x</code></strong> в контексте системы координат. Точный эффект этого атрибута зависит от каждого элемента. В основном атрибут работает по оси x от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента). Его синтаксис такой же, как и для <a href="https://www.w3.org/TR/SVG11/types.html#DataTypeLength"><strong><code><length></code></strong>.</a></p> + +<p>Если атрибут <strong><code>x</code></strong> явно не указан, то эффект будет таким, как если бы значение атрибута равнялось бы <strong>0</strong>, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равно <strong>-10%</strong>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/ru/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/ru/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативные документы (en)</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute" title="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<p>{{page("/ru/SVG/Content_type","coordinate")}}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml line-numbers language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> + <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>x</code>.</p> + +<ul> + <li><code><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</code></li> + <li><code>{{SVGElement("altGlyph")}}</code></li> + <li><code>{{SVGElement("fePointLight")}}</code></li> + <li><code>{{SVGElement("feSpotLight")}}</code></li> + <li><code>{{SVGElement("filter")}}</code></li> + <li><code>{{SVGElement("foreignObject")}}</code></li> + <li><code>{{SVGElement("glyphRef")}}</code></li> + <li><code>{{SVGElement("image")}}</code></li> + <li><code>{{SVGElement("pattern")}}</code></li> + <li><code>{{SVGElement("rect")}}</code></li> + <li><code>{{SVGElement("svg")}}</code></li> + <li><code>{{SVGElement("text")}}</code></li> + <li><code>{{SVGElement("use")}}</code></li> + <li><code>{{SVGElement("mask")}}</code></li> + <li><code>{{SVGElement("tref")}}</code></li> + <li><code>{{SVGElement("tspan")}}</code></li> +</ul> diff --git a/files/ru/web/svg/attribute/xml_colon_space/index.html b/files/ru/web/svg/attribute/xml_colon_space/index.html new file mode 100644 index 0000000000..0b921d2e5a --- /dev/null +++ b/files/ru/web/svg/attribute/xml_colon_space/index.html @@ -0,0 +1,50 @@ +--- +title: 'xml:space' +slug: 'Web/SVG/Attribute/xml:space' +translation_of: 'Web/SVG/Attribute/xml:space' +--- +<div>{{deprecated_header("SVG2")}}</div> + +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>SVG supports the standard XML attribute <code>xml:space</code> to specify the handling of white space characters within a given {{ SVGElement("text") }} element's character data. Note that any child element of a {{ SVGElement("text") }} element may also have an <code>xml:space</code> attribute which will apply to that child element's text content. Note that this attribute influences the way a browser should parse the xml content and therefore will change the way the DOM is built. It means that any change made to the value of this attribute through the DOM API may have no effect.</p> + +<div class="note"> +<p><strong>Note:</strong> Instead of using the <code>xml:space</code> attribute you should use the {{cssxref("white-space")}} CSS property.</p> +</div> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code><strong>default</strong></code> | <code>preserve</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#WhiteSpace" title="http://www.w3.org/TR/SVG11/text.html#WhiteSpace">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>default</dt> + <dd>Браузер удалит все символы перевода строки. Затем он преобразует все символы табуляции в символы пробелов. Затем он вырежет все начальные и конечные пробелы. И, наконец, все смежные пробелы будут объединены.</dd> + <dt>preserve</dt> + <dd>Браузер преобразует все символы перевода строки и табуляции в символы пробелов. Затем он отрендерит все символы пробелов, в том числе начальные и конечные, а также смежные. Таким образом, когда рендеринг происходит с <code>xml:space="preserve"</code>, строка "a b" (три пробела между "a" и "b") будет иметь больше расстояние между "a" и "b", чем "a b" (один пробел между "a" и "b").</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h2 id="Elements">Elements</h2> + +<p>All the SVG elements can use the <code>xml:space</code> attribute</p> diff --git a/files/ru/web/svg/attribute/y/index.html b/files/ru/web/svg/attribute/y/index.html new file mode 100644 index 0000000000..d73d5f2ab5 --- /dev/null +++ b/files/ru/web/svg/attribute/y/index.html @@ -0,0 +1,86 @@ +--- +title: 'y' +slug: Web/SVG/Attribute/y +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/y +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p><span class="seoSummary">Атрибут <strong><code>y</code></strong> указывает координаты вертикальной оси системы координат в контексте объекта. В основном атрибут работает по оси y от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента).</span></p> + +<p>Если атрибут явно не указан, его значение по умолчанию равняется <strong>0</strong>, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равняется <strong> -10% </strong>.</p> + +<h2 id="Использование">Использование</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/ru/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">Анимация</th> + <td>Возможно</td> + </tr> + <tr> + <th scope="row">Нормативные документы (en)</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementYAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<p>{{page("/ru/SVG/Content_type","coordinate")}}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml line-numbers language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> + <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>y</code>.</p> + +<ul> + <li><a href="/ru/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("foreignObject")}}</li> + <li>{{SVGElement("glyphRef")}}</li> + <li>{{SVGElement("image")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("rect")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("use")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> diff --git a/files/ru/web/svg/index.html b/files/ru/web/svg/index.html new file mode 100644 index 0000000000..46a1143d6f --- /dev/null +++ b/files/ru/web/svg/index.html @@ -0,0 +1,103 @@ +--- +title: SVG +slug: Web/SVG +tags: + - 2D Graphics + - References + - SVG +translation_of: Web/SVG +--- +<div class="callout-box"><strong><a href="/ru/docs/Web/SVG/Tutorial">С чего начать</a></strong><br> +Этот урок поможет вам начать использовать SVG.</div> + +<p><strong>Масштабируемая векторная графика<br> + (Scalable Vector Graphics — SVG)</strong> является {{Glossary("язык разметки", "языком разметки")}} расширенным из <a href="/ru/docs/XML">XML</a> для описания двухмерной {{Glossary("векторная графика", "векторной графики")}}. SVG по существу является графикой, так же, как {{Glossary("XHTML")}} — текстом.</p> + +<p>SVG по своим возможностям приближается к запатентованной технологии Adobe Flash, но отличается от неё тем, что SVG является <a href="http://www.w3.org/Graphics/SVG/">рекомендацией W3C</a> (то есть, стандартом), и тем, что это формат, основанный на {{Glossary("XML")}}, в противовес закрытому двоичному формату Flash. Он явно спроектирован для работы с другими стандартами <a href="http://www.w3.org/">W3C</a>, такими, как <a href="/ru/docs/CSS">CSS</a>, <a href="/ru/docs/DOM">DOM</a> и <a href="http://www.w3.org/AudioVideo/">SMIL</a>. </p> + +<p>SVG-графика и связанные с ней поведения определяются в текстовых XML-файлах, что означает, что их можно искать, индексировать, создавать сценарии и сжимать. Кроме того, это означает, что они могут быть созданы и отредактированы с помощью любого текстового редактора и программ для рисования. </p> + +<p>SVG — открытый стандарт, разработанный <a href="https://www.w3.org/">World Wide Web консорциумом (W3C)</a> с 1999 года.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2> + +<dl> + <dt><a href="/ru/docs/Web/SVG/Элемент">Справочник по элементам SVG</a></dt> + <dd>Подробная информация о каждом элементе SVG.</dd> + <dt><a href="/ru/docs/Web/SVG/Attribute">Справочник по атрибутам SVG</a></dt> + <dd>Подробная информация о каждом атрибуте SVG.</dd> + <dt><a href="/ru/docs/DOM/DOM_Reference#SVG_interfaces">Справочник по интерфейсу SVG DOM</a></dt> + <dd>Подробная информация по всему SVG DOM API.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">Применение эффектов SVG к содержимому HTML</a> </dt> + <dd>SVG работает вместе с {{Glossary("HTML")}}, {{Glossary("CSS")}} и {{Glossary("JavaScript")}}.<br> + <a href="https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction">Используйте SVG для улучшения обычной страницы HTML или веб-приложения.</a>.</dd> + <dt>SVG в Mozilla</dt> + <dd>Замечания и информация о том, как SVG реализован в Mozilla. + <ul> + <li><a href="/ru/docs/SVG_in_Firefox">Полнота реализации SVG в Firefox</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial">SVG - учебное руководство</a></li> + <li><a href="/ru/docs/SVG_In_HTML_Introduction">SVG в XHTML</a></li> + </ul> + </dd> +</dl> + +<p><span class="alllinks"><a href="/ru/docs/tag/SVG">Просмотреть всё…</a></span></p> + +<h2 class="Community" id="Community" name="Community">Сообщество</h2> + +<ul> + <li>Обращайтесь на форумы Mozilla… {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="Tools" name="Tools">Инструменты</h2> + +<ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">Набор для тестирования SVG</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">Валидатор SVG</a> (уже не работает)</li> + <li><a href="/ru/docs/tag/SVG:Tools">Больше инструментов…</a></li> + <li>Другие ресурсы: <a href="/ru/docs/XML">XML</a>, <a href="/ru/docs/CSS">CSS</a>, <a href="/ru/docs/DOM">DOM</a>, <a href="/ru/docs/HTML/Canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Examples" name="Examples">Примеры</h2> + +<ul> + <li><a href="http://maps.google.com">Карты Google</a> (маршруты поверх карты) и <a href="http://docs.google.com">Документы Google</a> (диаграммы в электронных таблицах)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Меню из пузырьков на SVG</a></li> + <li><a href="http://jwatt.org/svg/authoring/">Рекомендации по составлению SVG</a></li> + <li>Обзор <a href="/ru/docs/Mozilla_SVG_Project">Проекта Mozilla SVG</a></li> + <li><a href="/ru/docs/SVG/FAQ">Часто задаваемые вопросы</a>, касающиеся SVG и Mozilla</li> + <li>Слайды и демонстрации с обсуждения <a href="https://jwatt.org/blog/2009/11/16/slides-and-demos-from-svg-open-2009">SVG и Mozilla</a>, проходившего на SVG Open 2009</li> + <li><a href="/ru/docs/SVG/SVG_as_an_Image">Использование SVG в качестве изображения</a></li> + <li><a href="/ru/docs/SVG/SVG_animation_with_SMIL">SVG анимация при помощи SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Художественная галерея SVG</a></li> + <li>Больше примеров (примеры SVG с <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> +</ul> + +<h3 id="Animation_and_interactions" name="Animation_and_interactions">Анимация и взаимодействие</h3> + +<p>Как и HTML, SVG имеет объектную модель документа (DOM) и события и всё это может быть доступно через JavaScript. Это позволяет разработчикам создавать роскошные анимации и интерактивные изображения.</p> + +<ul> + <li>Некоторые захватывающие работы с использованием SVG на <a href="http://svg-wow.org/">svg-wow.org</a></li> + <li>Расширение Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) для добавления поддержки анимации с использованием {{Glossary("SMIL")}}</li> + <li>Интерактивное управление <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">фотографиями</a></li> + <li>Использование <code>foreignObject</code> из SVG для <a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">изменения HTML</a></li> + <li>Анимация <a href="http://www.creative-seo.ru/svg-speedometer/">SVG спидометр</a></li> +</ul> + +<h3 id="Mapping.2C_charting.2C_games_.26_3D_experiments" name="Mapping.2C_charting.2C_games_.26_3D_experiments">Карты, диаграммы, игры и эксперименты с 3D</h3> + +<p>В то время, как маленькие документы SVG могут серьёзно улучшить веб-контент, здесь представлены некоторые примеры тяжёлого использования SVG.</p> + +<ul> + <li><a href="http://www.codedread.com/yastframe.php">Тетрис</a></li> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">Популяционная карта США</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (интерактивные карты для визуализации данных)</li> +</ul> +</div> +</div> diff --git a/files/ru/web/svg/svg_1.1_support_in_firefox/index.html b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..b552e8a208 --- /dev/null +++ b/files/ru/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,774 @@ +--- +title: Поддержка SVG 1.1 в Firefox +slug: Web/SVG/SVG_1.1_Support_in_Firefox +translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +--- +<p>Основные примеры синтаксиса и использования SVG вы можете найти в <a href="https://www.w3.org/Graphics/SVG/Test/20061213/">наборе тестов W3C SVG</a>. </p> + +<div class="note"> +<p><strong>Примечание:</strong> Начиная с {{Gecko("2.0")}}, Gecko поддерживает SVG-анимацию с использованием SMIL. Для краткого обзора смотрите <a href="/en-US/docs/SVG/SVG_animation_with_SMIL" title="SVG/SVG animation with SMIL">SVG анимация и SMIL</a>. <br> + Будет подготовлена и полная документация для SVG. Когда-нибудь.</p> +</div> + +<p>Также существует описание поддержки <a href="/en-US/docs/Web/SVG/SVG_2_support_in_Mozilla">Mozilla изменений в SVG 2</a>. </p> + +<h2 id="Статус_реализации_элемента">Статус реализации элемента</h2> + +<p>Быстрый обзор элементов <a href="https://www.w3.org/TR/SVG11/">SVG 1.1</a> и текущий статус встроенной поддержки.</p> + +<table class="standard-table" style="border-collapse: separate;"> + <tbody> + <tr> + <th>Элемент</th> + <th>Комментарий</th> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li><code>currentScale</code> и <code>currentTranslate</code> DOM, но нет пользовательского интерфейса панорамирования и масштабирования.</li> + <li>SVGSVGElement + <ul> + <li>Невыполненные атрибуты: contentScriptType, contentStyleType, viewport, currentView</li> + <li>Невыполненные привязки: getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Сохраняется только в DOM, без пользовательского интерфейса.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Заголовок <code>title</code> отображается как подсказка, когда мышь зависает над объектом SVG.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Сохраняется только в DOM, без пользовательского интерфейса.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Не полностью соблюдает <svg:use> каскадные правила ({{Bug(265894)}}).</li> + <li>Не передает события в дерево SVGElementInstance ({{Bug(265895)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Интерфейс SVGPathElement + <ul> + <li>Невыполненные атрибуты: normalizedPathSegList, animatedNormalizedPathSegList</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/text.html#text-mod">Text Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Перечисленные атрибуты презентации не работают (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)</li> + <li>Недавно реализованные атрибуты презентации: direction, unicode-bidi, font-variant, text-decoration {{gecko_minversion_inline("25")}}</li> + <li>SVGTextElement + <ul> + <li>Недавно реализованные привязки: selectSubString {{gecko_minversion_inline("25")}}</li> + <li>Недавно реализованные атрибуты: textLength, lengthAdjust {{gecko_minversion_inline("25")}}</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Некоторые атрибуты презентации не работают (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)</li> + <li>Недавно реализованные атрибуты презентации: direction, unicode-bidi, font-variant, text-decoration {{gecko_minversion_inline("25")}}</li> + <li>SVGTSpanElement + <ul> + <li>Недавно реализованные привязки: <br> + selectSubString{{gecko_minversion_inline("25")}}</li> + <li>Недавно реализованные атрибуты: textLength, lengthAdjust {{gecko_minversion_inline("25")}}</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td style="background-color: rgb(204, 204, 204);"><a href="https://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> + <td style="background-color: rgb(204, 204, 204);"> + <ul> + <li>Эта функция, представленная в раннем проекте спецификации, была удалена из нее и поэтому не реализована ({{Bug(273171)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Недавно реализованные привязки: <br> + selectSubString{{gecko_minversion_inline("25")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: khaki;"> + <td><a href="https://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> + <td> + <ul> + <li>Реализовано как <code>tspans</code>, никаких функций шрифта, как у Gecko 2.0 ({{Bug(456286)}}, {{Bug(571808)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> + <td> + <ul> + <li>Не выполнена ({{Bug(427713)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Из псевдо-входов:<br> + <code>SourceGraphic</code>, <code>SourceAlpha</code>, <code>FillPaint</code> {{gecko_minversion_inline("17")}} и <code>StrokePaint</code> {{gecko_minversion_inline("17")}} - реализованы.</li> + <li>Использование нереализованного псевдо-входного или фильтрующего элемента приведет к игнорированию фильтра и рисованию обратного графика без какого-либо фильтра.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> + <td> + <ul> + <li>Выполнена.</li> + <li>Фрагменты документа ({{bug(455986)}}) не поддерживаются в <svg:feImage>. </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> + <td> + <ul> + <li>Не выполнена ({{Bug(177193)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> + <td> + <ul> + <li>Исправлены только <code>xlink:href</code>, <code>xlink:show</code>, <code>xlink:target</code> и атрибуты заголовка <code>xlink:title</code>.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/linking.html#view-mod">View Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> + <td> + <ul> + <li>Выполнено в Gecko 15.0 ({{Bug(512525)}}). {{gecko_minversion_inline("15.0")}}.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> + <td> + <ul> + <li>Не выполнена ({{Bug(436296)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/fonts.html#font-mod">Font Module</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontElement" title="http://www.w3.org/TR/SVG11/fonts.html#FontElement">font</a></td> + <td> + <ul> + <li>Не выполнена ({{Bug(119490)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="https://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> + <td> + <ul> + <li>Не выполнена.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="https://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility Module</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="https://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> + <td> + <ul> + <li>Выполнена.</li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/svg/svg_as_an_image/index.html b/files/ru/web/svg/svg_as_an_image/index.html new file mode 100644 index 0000000000..e179b323b2 --- /dev/null +++ b/files/ru/web/svg/svg_as_an_image/index.html @@ -0,0 +1,66 @@ +--- +title: SVG как изображение +slug: Web/SVG/SVG_as_an_Image +translation_of: Web/SVG/SVG_as_an_Image +--- +<p><span class="seoSummary">Изображения SVG могут использоваться как формат изображения в ряде контекстов. Многие браузеры поддерживают изображения SVG:</span></p> + +<ul> + <li>Элементы HTML {{HTMLElement("img")}} или {{SVGElement("svg")}}</li> + <li>CSS {{cssxref("background-image")}}</li> +</ul> + +<h2 id="Гекко-специфические_контексты">Гекко-специфические контексты</h2> + +<p>Кроме того, Gecko 2.0 {{geckoRelease("2.0")}} представил поддержку использования <a href="/en-US/docs/SVG">SVG</a> iв следующих контекстах:</p> + +<ul> + <li>CSS {{cssxref("list-style-image")}}</li> + <li>CSS {{cssxref("content")}}</li> + <li>Элементы SVG {{SVGElement("image")}}</li> + <li>Элементы SVG {{SVGElement("feImage")}}</li> + <li>Функция Canvas <a href="/en-US/docs/HTML/Canvas/Tutorial/Using_images#drawImage"><code>drawImage</code></a></li> +</ul> + +<h3 id="Ограничения">Ограничения</h3> + +<p>В целях безопасности, Gecko накладывает некоторые ограничения на контент SVG, когда он используется в качестве изображения:</p> + +<ul> + <li><a href="/en-US/docs/JavaScript">JavaScript</a> отключен.</li> + <li>Внешние ресурсы (например, изображеня, таблицы стилей) не могут быть загружены, хотя их можно использовать, если они встроены в данные: URI.</li> + <li>{{cssxref(":visited")}}-стили ссылок не отображаются.</li> + <li>Стилизация виджитов на платформе (основанная на теме ОС) отключена.</li> +</ul> + +<p>Обратите внимание, что вышеуказанные ограничения являются специфическими для контекстов изображения; они не применяются, когда содержимое SVG просматривается напрямую или когда оно внедрено в виде документа с помощью встраивания элементов {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, или {{HTMLElement("embed")}}.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Определяет использование SVG в элементах {{HTMLElement("img")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}</td> + <td>{{Spec2("CSS3 Backgrounds")}}</td> + <td>Определяет использование SVG со свойствами {{cssxref("background-image")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/SVG_In_HTML_Introduction">SVG в HTML. Введение</a></li> +</ul> diff --git a/files/ru/web/svg/tutorial/clipping_and_masking/index.html b/files/ru/web/svg/tutorial/clipping_and_masking/index.html new file mode 100644 index 0000000000..f5d2198fc8 --- /dev/null +++ b/files/ru/web/svg/tutorial/clipping_and_masking/index.html @@ -0,0 +1,87 @@ +--- +title: Обрезка и маска +slug: Web/SVG/Tutorial/Clipping_and_masking +translation_of: Web/SVG/Tutorial/Clipping_and_masking +--- +<p><br> + {{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p> + +<p> </p> + +<p>На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнетесь со следующими свойствами.<br> + <br> + <strong>Обрезка (Clipping) </strong>позволяет скрыть часть одного или нескольких элементов, используя другой. В этом случае нельзя настроить прозрачность элемента, это подход «все или ничего».<br> + <br> + <strong>Маска</strong>, с другой стороны, позволяет создавать полупрозрачные эффекты (например, размытые края).</p> + +<h3 id="Кадрирование_изображений">Кадрирование изображений</h3> + +<p>Мы можем создать полукруг на основе окружности:</p> + +<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <clipPath id="cut-off-bottom"> + <rect x="0" y="0" width="200" height="100" /> + </clipPath> + </defs> + + <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> +</svg> +</pre> + +<p>По центру (100,100) нарисован круг с радиусом 100. Атрибут<code> clip-path</code> ссылается на элемент <code>{{ SVGElement("clipPath") }}</code>, который содержит элемент <code>rect</code>. Этот прямоугольник позволит отрисовать верхнюю половину черного холста. Обратите внимание, что элемент <code>clipPath</code> обычно помещается в раздел <code>defs</code>.<br> + <br> + При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:</p> + +<p>{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}</p> + +<p>Теперь мы получили полуокружность без необходимости использования элемента <code>path</code>. При “обрезке” каждый путь внутри <code>clipPath</code> проверяется и оценивается вместе с его свойствами <code>stroke</code> и <code>transform</code>. Другими словами, все что не находится в залитой области <code>clipPath</code> не будет отображено. Цвет, непрозрачность и т. д. не влияют на результат.</p> + +<h3 id="Маска">Маска</h3> + +<p>Хороший пример использования маски - это градиент. В разных местах изображения с помощью масок можно добиться разной степени прозрачности.</p> + +<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="Gradient"> + <stop offset="0" stop-color="white" stop-opacity="0" /> + <stop offset="1" stop-color="white" stop-opacity="1" /> + </linearGradient> + <mask id="Mask"> + <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> + </mask> + </defs> + + <rect x="0" y="0" width="200" height="200" fill="green" /> + <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /> +</svg> +</pre> + +<p>Фактически на примере находятся два прямоугольника: зеленый на нижнем слое и красный на верхнем. У красного есть атрибут <code>mask</code>, который ссылается на элемент <code>mask</code>. Содержимое маски это элемент <code>rect</code>, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зеленый градиент: </p> + +<p>{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}</p> + +<h3 id="Прозрачность_opacity">Прозрачность <code>opacity</code></h3> + +<p>Можно достаточно просто установить прозрачность для всего элемента, например используя атрибут <code>opacity</code>:</p> + +<pre class="brush: xml"><rect x="0" y="0" width="100" height="100" opacity=".5" /> +</pre> + +<p>Вышеуказанный прямоугольник будет полупрозрачным. Для того, чтобы задать непрозрачность заливке или контуру мы можем использовать 2 отдельных атрибута <code>fill-opacity</code> и <code>stroke-opacity</code>. Обратите внимание, что заполнение контура будет перекрывать основную заливку. Следовательно, если установить прозрачность контура у элемента, который также имеет заливку, половина контура наложится на цвет заливки, а другая на фон:</p> + +<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="200" height="200" fill="blue" /> + <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> +</svg> +</pre> + +<p>{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}</p> + +<p>В этом примере используется красный круг на голубом фоне. Желтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.</p> + +<h2 id="Использование_хорошо_известных_CSS_техник">Использование хорошо известных CSS техник</h2> + +<p>Одним из мощных инструментов является <code>display: none</code>. Поэтому неудивительно, что было принято решение использовать это CSS свойство в SVG вместе с <code>visibility</code> и <code>clip</code>, как определено в CSS 2. Для восстановления значения по умолчанию ранее важно знать, что начальное значение для всех элементов SVG - <code>inline</code>.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p> diff --git a/files/ru/web/svg/tutorial/fills_and_strokes/index.html b/files/ru/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..0caf2a76c5 --- /dev/null +++ b/files/ru/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,145 @@ +--- +title: Заливка и обводка +slug: Web/SVG/Tutorial/Fills_and_Strokes +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> + +<p>Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.</p> + +<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Атрибуты заливки и обводки (Fill and Stroke Attributes)</h2> + +<h3 id="Painting" name="Painting">Раскраска (Painting)</h3> + +<p>Основная раскраска может быть сделана установкой двух свойств на ноде - <em>fill </em>и <em>stroke. Fill - </em>устанавливает цвет внутри объекта, а <em>stroke </em>задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML - названия цветов (например,<em> red)</em>, rgb-значения, hex-значения, rgba-значения и т.д.</p> + +<pre class="brush:xml;"> <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" + fill-opacity="0.5" stroke-opacity="0.8"/> +</pre> + +<p>Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами <em>fill-opacity, stroke-opacity.</em></p> + +<div class="note style-wrap">Замечание: в Файрфокс 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение <em>fill-opacity/stroke-opacity - </em>будут применены оба.</div> + +<h3 id="Stroke" name="Stroke">Обводка (Stroke)</h3> + +<p>Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png" style="float: right;"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> + <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> + <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> +</svg></pre> + +<p>Свойство <em>stroke-width </em>определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображен розовым, а обводка - черным.</p> + +<p>Второй атрибут, влияющий на обводку - свойство <em>stroke-linecap. </em>Демонстрируется выше. Свойство управляет отображениеи концов линий.</p> + +<p>Есть три возможных значения для <em>stroke-linecap</em>:</p> + +<ul> + <li><code>butt</code> обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.</li> + <li><code>square</code> в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка - это половина заданного значения <em>stroke-width.</em></li> + <li><code>round</code> задаёт закругленные углы по краям обводки. Радиус этих кривых также управляется параметром <em>stroke-width.</em></li> +</ul> + +<p>Используйте<code><em> </em>stroke-linejoin</code>, чтобы определить, как соединять обводку двух сегментов линии.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png" style="float: right;"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" + stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> + + <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" + stroke-linecap="round" fill="none" stroke-linejoin="round"/> + + <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" + stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> +</svg></pre> + +<p>Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом <code>stroke-linejoin</code>. Есть три возможных значения для этого атрибута:</p> + +<ul> + <li><code>miter </code>продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.</li> + <li><code>round </code>создаёт закругленный сегмент линии</li> + <li><code>bevel </code>создаёт новый угол для помощи в переходе между двумя сегментами</li> +</ul> + +<p>Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут <code>stroke-dasharray</code>.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png" style="float: right;"></p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" + stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> + <path d="M 10 75 L 190 75" stroke="red" + stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> +</svg></pre> + +<p>В качестве аргумента атрибут <code>stroke-dasharray </code>принимает последовательность чисел, разделенных запятой.</p> + +<div class="note"> +<p>Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).</p> +</div> + +<p>Первое число определяет длину штриха, второе - длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берет эти числа дважды, чтобы создать четный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми "пикселями". Затем паттерн повторяется.</p> + +<p>Также есть дополнительные <strong>stroke </strong>и <strong>fill </strong>свойства: <code><a href="/en-US/docs/Web/SVG/Attribute/fill-rule">fill-rule</a>, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя;</code> <code><a href="/en-US/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a>, </code>which determines if a stroke should draw miters<code> и </code><a href="/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a>, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)</p> + +<h2 id="Using_CSS" name="Using_CSS">Использование CSS (Using CSS)</h2> + +<p>В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что <code>fill, stroke, stroke-dasharray </code>и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде <code>width, height </code>или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.</p> + +<div class="note style-wrap"><a href="http://www.w3.org/TR/SVG/propidx.html">Спецификация SVG</a> строго разделяет атрибуты на <em>свойства</em> и другие атрибуты. Первые могут быть изменены через CSS, а вторые - нет.</div> + +<p>CSS может использоваться инлайн через атрибут <code>style</code>:</p> + +<pre class="brush:xml;"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> +</pre> + +<p>или может быть помещен в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <code><head>, </code>как это делается в HTML, она включается в зону <code><defs>, </code>предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.</p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <style type="text/css"><![CDATA[ + #MyRect { + stroke: black; + fill: red; + } + ]]></style> + </defs> + <rect x="10" height="180" y="10" width="180" id="MyRect"/> +</svg></pre> + +<p>Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:</p> + +<pre class="brush:css;"> #MyRect:hover { + stroke: black; + fill: blue; + } +</pre> + +<p>Также можно определить отдельный файл стилей для ваших CSS-правил через <a href="http://www.w3.org/TR/xml-stylesheet/">обычный XML-stylesheet синтаксис</a>:</p> + +<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> +<?xml-stylesheet type="text/css" href="style.css"?> + +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect height="10" width="10" id="MyRect"/> +</svg></pre> + +<p>где style.css выглядит примерно так</p> + +<pre class="brush:css;">#MyRect { + fill: red; + stroke: black; +}</pre> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p> diff --git a/files/ru/web/svg/tutorial/filter_effects/index.html b/files/ru/web/svg/tutorial/filter_effects/index.html new file mode 100644 index 0000000000..d063063795 --- /dev/null +++ b/files/ru/web/svg/tutorial/filter_effects/index.html @@ -0,0 +1,14 @@ +--- +title: Фильтры +slug: Web/SVG/Tutorial/Filter_effects +translation_of: Web/SVG/Tutorial/Filter_effects +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p> + +<p>Бывают ситуации, при которых базовые фигуры не обеспечивают гибкость, необходимую для достижения определенного эффекта. Тени, например, не могут быть созданы с помощью комбинации градиентов. Фильтры - это механизм SVG для создания сложных эффектов. <br> + <br> + Основным примером может послужить эффект размытия в SVG. Базовый эффект размытия может быть достигнут с помощью градиентов, фильтр размытия необходим, чтобы сделать что-либо большее.</p> + +<p>Вы можете получить полную информацию об SVG фильтрах на <a href="https://www.w3.org/TR/SVG/filters.html">W3C Recommendation</a>.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p> diff --git a/files/ru/web/svg/tutorial/getting_started/index.html b/files/ru/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..5882814c4a --- /dev/null +++ b/files/ru/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,93 @@ +--- +title: Начало работы +slug: Web/SVG/Tutorial/Getting_Started +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Getting_Started +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> + +<h3 id="A_Simple_Example" name="A_Simple_Example">Простой пример</h3> + +<p>Давайте начнем наше погружение с простого примера. Посмотрите на код, представленный ниже:</p> + +<pre class="brush: xml"><svg version="1.1" + baseProfile="full" + width="300" height="200" + xmlns="http://www.w3.org/2000/svg"> + + <rect width="100%" height="100%" fill="red" /> + + <circle cx="150" cy="100" r="80" fill="green" /> + + <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> + +</svg> +</pre> + +<p>Скопируйте код и вставьте его в файл demo1.svg. После чего откройте его в Firefox. Браузер отобразит Вам следующее изображение (пользователи Firefox: нажмите <a class="external" href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">сюда</a>):</p> + +<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p> + +<p>Процесс отображения включает следующее:</p> + +<ol> + <li>Мы начинаем с корневого элемента <code>svg</code>: + + <ul> + <li>как известно из (X)HTML, декларацию doctype следует опустить, потому что DTD на основе валидации SVG приводит к бо́льшим проблемам, чем их решает</li> + <li>до SVG 2, чтобы обозначить версию SVG для других типов вилидации, всегда следует использовать атрибуты <code>version</code> и <code>baseProfile</code>. Но в SVG 2 оба эти атрибута <code>version</code> и <code>baseProfile</code> обрели статус не рекомендованных</li> + <li>как диалект XML, SVG всегда правильно должен связывать простанства имен (в атрибуте xmlns). Смотри страницу <a href="/en/docs/Web/SVG/Namespaces_Crash_Course" title="en-US/Web/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a> для большей информации.</li> + </ul> + </li> + <li>Фон устанавливается красным при помощи рисования прямоугольника <a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect"><code><rect/></code></a>, который покрывает всю область изображения</li> + <li>Зеленый круг <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle"><code><circle/></code></a> с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещен на 150px вправо, и 100px вниз).</li> + <li>Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зеленого круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.</li> +</ol> + +<h3 id="Основные_свойства_файлов_SVG">Основные свойства файлов SVG</h3> + +<ul> + <li>Первая важная вещь, которую следует заметить - это порядок отображения элементов. Глобально действующее правило для файлов SVG - элементы, <em>которые отрендерились позднее</em>, отображаются <em>поверх </em>предыдущих элементов. Чем дальше вниз элемент (по коду / порядку рендеринга), тем более видимым он будет.</li> + <li>Файлы SVG в вэбе могут быть отображены прямо в браузере или внедрены в файлы HTML посредством нескольких методов: + <ul> + <li>Если HTML является XHTML и выводится как тип приложение<code>/xhtml+xml</code>, SVG может быть прямо внедрён в источник XML.</li> + <li>Если HTML является HTML5, и браузер совместим с HTML5, SVG может быть прямо внедрён тоже. Однако, возможны синтаксические изменения для соответствия с HTML5 спецификацией</li> + <li>На файл SVG можно ссылаться с помощью элемента <code>object</code>: + <pre> <object data="image.svg" type="image/svg+xml" /></pre> + </li> + <li>Аналогично может быть использован элемент <code>iframe</code>: + <pre> <iframe src="image.svg"></iframe></pre> + </li> + <li>Элемент <code>img</code> тоже может быть использован теоретически. Однако эта техника не работает в Firefox до версии 4.0.</li> + <li>Наконец SVG может быть создан динамически с помощью JavaScript и введён в HTML DOM. Этот способ имеет преимущество тем, что могут быть реализованы замещающие технологии для браузеров, которые не могут воспроизводить SVG.</li> + </ul> + Смотри <a href="/en-US/docs/SVG_In_HTML_Introduction" title="svg in html introduction">эту статью</a> для более глубокого знакомства с темой.</li> + <li>Как SVG управляет размерами и единицами будет объяснено <a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">на следующей странице</a>.</li> +</ul> + +<h3 id="SVG_File_Types" name="SVG_File_Types">Типы SVG файлов</h3> + +<p>Файлы SVG бывают двух видов. Нормальные файлы SVG - это простые текстовые файлы, содержащие разметку SVG. Рекомендуется расширение ".svg" (все нижним регистром) к имени файла для этих файлов.</p> + +<p>Благодаря потенциально массивному размеру, который файлы SVG могут иметь при использовании в некоторых приложениях (например, географические приложения), спецификация SVG также допускает gzip-архивированные файлы SVG. Рекомендуется расширение ".svgz" (все нижним регистром) к имени файла. К сожалению, очень проблематично получить gzip-архивированные файлы SVG для надёжной работы со всеми SVG совместимыми пользовательскими агентами при управлении с сервера Microsofts IIS, когда Firefox не может загрузить gzip-архивированный SVG с локального компьютера. Избегайте gzip-архивированного SVG, кроме случаев, когда вы публикуетесь на вебсервере, в корректной работе которого вы уверены (смотри ниже).</p> + +<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">Слово о Вебсерверах</h3> + +<p>Теперь, когда вы имеете представление о том, как создавать основные файлы SVG, следующим шагом будет загрузить их на Вебсервер. Но на этом этапе существуют некоторые подводные камни. Для нормальных файлов SVG, сервера должны посылать заголовки HTTP:</p> + +<pre>Content-Type: image/svg+xml +Vary: Accept-Encoding</pre> + +<p>Для gzip-архивированных файлов SVG, сервера должны посылать заголовки HTTP:</p> + +<pre>Content-Type: image/svg+xml +Content-Encoding: gzip +Vary: Accept-Encoding</pre> + +<p>Вы можете проверить, правильные ли заголовки HTTP посылает ваш сервер с файлами SVG, используя <a href="/en-US/docs/Tools/Network_Monitor#Headers">Network Monitor panel</a> или сайт, такой как <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>. Введите URL одного из файлов SVG и смотрите на заголовки ответа HTTP. Если вы обнаружите, что сервер не посылает заголовки с величинами, данными выше - вам следует связаться с вашим хостингом. Если у вас возникнут проблемы с тем, чтобы корректно сконфигурировать их сервера для SVG, существуют способы сделать это самостоятельно. Смотри <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">server configuration page</a> на странице SVG wiki о ряде простых решений.</p> + +<p>Неверная конфигурация сервера является очень частой причиной в невозможности загрузить SVG, поэтому убедитесь, что вы проверили конфигурацию вашего сервера. Если ваш сервер не сконфигурирован для того, чтобы посылать правильные заголовки с файлами SVG, тогда Firefox будет вероятнее всего показывать разметку файлов как текст или кодированный мусор, или даже спрашивать программу просмотра выбрать приложение, чтобы открыть их.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> diff --git a/files/ru/web/svg/tutorial/gradients/index.html b/files/ru/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..bdb5e39461 --- /dev/null +++ b/files/ru/web/svg/tutorial/gradients/index.html @@ -0,0 +1,181 @@ +--- +title: Градиенты +slug: Web/SVG/Tutorial/Gradients +translation_of: Web/SVG/Tutorial/Gradients +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p> + +<p>Возможность создания и использования градиентов, также как заливки и обводки, более интересна, чем просто заливка или обводка.</p> + +<p>Есть два типа градиентов: линейный и радиальный. Вы должны присвоить градиенту атрибут <code><strong>id</strong>, </code>в противном случае на него не смогут ссылаться другие элементы внутри файла. Градиенты определяются в секции <code>defs, </code>а не в самой фигуре. Это позволяет их использовать многократно.</p> + +<h2 id="SVGLinearGradient" name="SVGLinearGradient">Линейный градиент (Linear Gradient)</h2> + +<p>Линейные градиенты изменяются вдоль прямой линии. Чтобы вставить градиент, нужно создать ноду {{SVGElement('linearGradient')}} внутри секции <code><defs> </code>SVG файла.</p> + +<h3 id="Basic_example">Basic example</h3> + +<pre class="brush: html notranslate"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="Gradient1"> + <stop class="stop1" offset="0%"/> + <stop class="stop2" offset="50%"/> + <stop class="stop3" offset="100%"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="0%" stop-color="red"/> + <stop offset="50%" stop-color="black" stop-opacity="0"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <style type="text/css"><![CDATA[ + #rect1 { fill: url(#Gradient1); } + .stop1 { stop-color: red; } + .stop2 { stop-color: black; stop-opacity: 0; } + .stop3 { stop-color: blue; } + ]]></style> + </defs> + + <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> + +</svg></pre> + +<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p> + +<p>Выше находится пример линейного градиента, который применен к элементу <code><rect>. </code>Внутри линейного градиента есть несколько {{SVGElement('stop')}} нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определенных атрибутом <code>offset </code>для позиции и атрибутом <code>stop-color. </code>Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, <em>Gradient1</em> начинается с красного цвета, изменяется до прозрачно-черного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут <code>stop-opacity, </code>чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).</p> + +<pre class="eval notranslate"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> +</pre> + +<p>Чтобы использовать градиент, мы должны сослаться на него из атрибутов объекта <code>fill/stroke</code>. Это делается таким же образом, как вы ссылаетесь на элементы в CSS, используя <code>url</code>. В этом случае, url - это просто ссылка на наш градиент, которому задан уникальный ID, "<em>Gradient". </em>Чтобы добавить его, установим <code>fill="url(#Gradient)"</code>. Наш объект теперь многоцветный. То же самое можно сделать с атрибутом <code>stroke</code>.</p> + +<p>Элемент <code><linearGradient></code> также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами <code>x1, x2, y1, y2</code>. Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.</p> + +<pre class="eval notranslate"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> +</pre> + +<div class="note"> +<p><strong>Замечание: </strong>Вы также можете использовать атрибут <code>xlink:href </code>для градиентов. Когда он использован, атрибуты и стопы из одного градиента могут быть включены в другой. В примере выше можно было бы не пересоздавать все точки остановки в Gradient2<strong>.</strong></p> + +<pre class="eval notranslate"> <linearGradient id="Gradient1"> + <stop id="stop1" offset="0%"/> + <stop id="stop2" offset="50%"/> + <stop id="stop3" offset="100%"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" + xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/> +</pre> + +<p>Я включил пространство имён xlink прямо в ноду, хотя обычно вы хотели бы определить его в верхней части вашего документа. Подробнее об этом мы <a href="https://developer.mozilla.org/en-US/Web/SVG/Tutorial/Other_content_in_SVG">поговорим в разделе изображений</a>.</p> +</div> + +<h2 id="Radial_Gradient" name="Radial_Gradient">Радиальные градиенты</h2> + +<p>Радиальные градиенты похожи на линейные, но рисуют градиент, который "излучается" из точки. Для создания градиента Вам необходимо добавить элемент {{SVGElement('radialGradient')}} в секцию <strong>defs</strong>.</p> + +<h3 id="Basic_example_2">Basic example</h3> + +<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> +<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="RadialGradient1"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/> + +</svg></pre> + +<p>{{ EmbedLiveSample('Basic_example_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p> + +<p>Аттрибуты <strong>stop</strong>, используемые здесь - отвечают за то же, что и в линейных градиентах. Однако сейчас объект будет красным в центре и постепенно меняться к синему цвету, "двигаясь" к краям. Как и линейный градиент, элемент <code><radialGradient></code> может иметь несколько аттрибутов, описывающих его позицию и ориентацию (направленность?). Однако, в отличие от линейных градиентов, радиальные немного сложнее. Радиальные градиенты задаются двумя "точками", которые определят где будут границы. Первая "точка" определяет окружность, где градиент заканчивается. Для этого нам потребуется центр круга, который обозначается как <strong>cx</strong> и <strong>cy</strong>, и радиус - <strong>r</strong>. Изменяя эти аттрибуты, вы можете "двигать" внешнюю границу градиента и менять ее размер, как показано во втором прямоугольнике выше.</p> + +<p>Вторая "точка" называется <strong>фокальной</strong> и задается аттрибутами <strong>fx</strong> и <strong>fy</strong>. В то время как первые "точки" указывают на внешнюю границу градиента, фокальная "точка" определяет где должна быть его <strong>середина</strong>. Это легко увидеть на примере.</p> + +<h3 id="Center_and_focal_point">Center and focal point</h3> + +<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> + +<svg width="120" height="120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="Gradient" + cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" + fill="url(#Gradient)" stroke="black" stroke-width="2"/> + + <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> + <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> + <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> + <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> + <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> + +</svg></pre> + +<p>{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}</p> + +<p>Если фокальная точка передвинута за границы круга, то градиент будет отрисован некорректно. Поэтому фокальная точка обязательно должна быть внутри границы круга (или на самой границе). Если фокальная точка не указана, то по дефолту она совпадает с центром круга.</p> + +<p>Линейный и радиальный градиенты также принимают несколько аттрибутов, описывающих как они могут изменяться. Единственный аттрибут, о котором я хотел бы рассказать более подробно - это <strong><code>spreadMethod</code></strong><code>. Этот аттрибут указывает, что должно происходить, когда градиент "достигает" внешней границы градиента, но объект еще не заполнен. Аттрибут может принимать одно и трех значений:</code>"pad", "reflect", или"repeat". "<strong>Pad</strong>" - это то что вы пока что видели: когда градиент достигает "краев", финальный цвет используется для заполнения оставшейся области. "Reflect" - градиент продолжает "двигаться" в "зеркальном" отражении (стартовый цвет берется из 100%, а конечный из 0%). А затем снова "переворачивается". И так до тех пор пока не достигнет края.</p> + +<h3 id="spreadMethod">spreadMethod</h3> + +<pre class="brush: html notranslate"><?xml version="1.0" standalone="no"?> + +<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="GradientPad" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="pad"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="GradientRepeat" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="repeat"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="GradientReflect" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="reflect"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> + <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> + + <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> + <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> + <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> + +</svg></pre> + +<p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p> + +<p>У обоих типов градиентов также есть атрибут <code><strong>gradientUnits</strong></code>, который описывает систему измерений, которую Вы собираетесь использовать, когда описываете размеры или ориентацию или градиен. Данный атрибут принимает 2 возможных значения: <strong><code>userSpaceOnUse</code></strong><code> </code>или <strong><code>objectBoundingBox </code></strong>(дефолтное, показывалось во всех примерах выше). <strong><code>objectBoundingBox </code></strong>автоматически адаптирует градиент к размеру объекта, так что Вы можете указать координаты в виде значений от 0 до 1, и браузер автоматически их отпозиционирует. <strong><code>userSpaceOnUse </code></strong>позиционирует градиент в абсолютных единицах измерения, так что Вам необходимо знать где находится целевой объект, чтобы правильно применить к нему градиент. radialGradient выше может быть переписан:</p> + +<pre class="eval notranslate"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> +</pre> + +<p>Вы также можете применить иную трансформацию к градиенту, используя аттрибут <strong><code>gradientTransform</code></strong>, но мы пока что <a href="/en-US/Web/SVG/Tutorial/Basic_Transformations">его не изучали</a>, я осталю это на потом.<br> + <br> + Существуют и другие предостережения для работы с <br> + <code>gradientUnits="objectBoundingBox"</code>, когда поле ограничения объекта не является квадратным, но они довольно сложны и им придется ждать, пока кто-то другой не соизволит объяснить их.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}</p> diff --git a/files/ru/web/svg/tutorial/index.html b/files/ru/web/svg/tutorial/index.html new file mode 100644 index 0000000000..ef0fc0459c --- /dev/null +++ b/files/ru/web/svg/tutorial/index.html @@ -0,0 +1,56 @@ +--- +title: SVG — учебное руководство +slug: Web/SVG/Tutorial +tags: + - Intermediate + - NeedsContent + - NeedsUpdate + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial +--- +<p>Масштабируемая векторная графика (<a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>), — это подмножество расширяемого языка разметки XML созданный Консорциумом Всемирной паутины (W3C). Эта технология реализована в Firefox, Opera, Internet Explorer, WebKit и в прочих браузерах.</p> + +<p>Это учебное пособие призвано обьяснить Вам суть технологии SVG и ознакомить с её техническими деталями. Если Вы хотите только рисовать красивые изображения, то Вы можете найти более полезные учебные ресурсы. Есть хорошее учебное пособие для знакомства с SVG — это учебное пособие от W3C <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p> + +<div class="note">Это учебное пособие находится в стадии разработки. Если Вы можете, то, пожалуйста, помогите с написанием одного или нескольких параграфов. Плюс балл Гриффиндору за написание целой страницы!</div> + +<h5 id="Введение_в_SVG">Введение в SVG</h5> + +<ul> + <li><a href="/ru/docs/Web/SVG/Tutorial/Введение" title="en-US/Web/SVG/Tutorial/Introduction">Введение</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Getting_Started" title="en-US/Web/SVG/Tutorial/Getting_Started">Начало работы</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Позиции" title="en-US/Web/SVG/Tutorial/Positions">Расположение(Позиция)</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Основные_Фигуры" title="en-US/Web/SVG/Tutorial/Basic_Shapes">Основные фигуры</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Пути(Paths)</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Fills_and_Strokes" title="en-US/Web/SVG/Tutorial/Fills_and_Strokes">Заливка и обводка</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Gradients" title="en-US/Web/SVG/Tutorial/Gradients">Градиенты</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Patterns" title="en-US/Web/SVG/Tutorial/Patterns">Паттерны(Шаблоны)</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Texts" title="en-US/Web/SVG/Tutorial/Texts">Текст</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Базовые_Преобразования" title="en-US/Web/SVG/Tutorial/Basic_Transformations">Базовые трансформации</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Clipping_and_masking" title="en-US/Web/SVG/Tutorial/Clipping_and_masking">Обрезка и маска</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">Другой контент в SVG</a></li> + <li><a href="/ru/Web/SVG/Tutorial/Filter_effects" title="en-US/Web/SVG/Tutorial/Filter effects">Фильтры</a></li> + <li><a href="/ru/Web/SVG/Tutorial/SVG_fonts" title="en-US/Web/SVG/Tutorial/SVG fonts">SVG-шрифты</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/SVG_Image_Tag" title="en-US/Web/SVG/Tutorial/SVG Image Tag">SVG-тег Image</a></li> + <li><a href="/ru/docs/Web/SVG/Tutorial/Tools_for_SVG" title="en-US/Web/SVG/Tutorial/Tools_for_SVG">Инструменты для SVG</a></li> + <li><a href="/ru/docs/Web/Guide/CSS/Getting_started/SVG_%D0%B8_CSS">SVG и CSS</a></li> +</ul> + +<p>Следующие темы более обширные, и они требуют отдельных учебных пособий.</p> + +<h5 id="Написание_SVG_с_JavaScript">Написание SVG с JavaScript</h5> + +<p>БОП</p> + +<h5 id="SVG-фильтры_—_руководство">SVG-фильтры — руководство</h5> + +<p>БОП</p> + +<h5 id="Анимация_с_помощью_SMIL_в_SVG">Анимация с помощью SMIL в SVG</h5> + +<p>БОП</p> + +<h5 id="Создание_шрифтов_в_SVG">Создание шрифтов в SVG</h5> + +<p>БОП</p> diff --git a/files/ru/web/svg/tutorial/other_content_in_svg/index.html b/files/ru/web/svg/tutorial/other_content_in_svg/index.html new file mode 100644 index 0000000000..af90be1201 --- /dev/null +++ b/files/ru/web/svg/tutorial/other_content_in_svg/index.html @@ -0,0 +1,39 @@ +--- +title: Другое содержание в SVG +slug: Web/SVG/Tutorial/Other_content_in_SVG +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Other_content_in_SVG +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p> + +<p>Помимо графических примитивов, таких как прямоугольники и круги, SVG предлагает набор элементов для встраивания других типов контента в изображения.</p> + +<h3 id="Встраивание_растровых_изображений">Встраивание растровых изображений</h3> + +<p>Так же, как элемент img в HTML SVG имеет элемент изображения, служащий той же цели. Вы можете использовать его для встраивания произвольных растровых (и векторных) изображений. Спецификация запрашивает приложения для поддержки файлов формата PNG, JPEG и SVG.</p> + +<p>Встроенное изображение становится обычным элементом SVG. Это означает, что вы можете использовать клипы, маски, фильтры, вращения и все другие инструменты SVG для контента:</p> + +<pre class="brush: html"><svg version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="200" height="200"> + <image x="90" y="-65" width="128" height="146" transform="rotate(45)" + xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> +</svg></pre> + +<p>{{ EmbedLiveSample('Встраивание_растровых_изображений','220','220','/files/16567/rotate-image-demo.png') }}</p> + +<h3 id="Внедрение_произвольного_XML">Внедрение произвольного XML</h3> + +<p>Поскольку SVG является XML-приложением, вы можете, конечно, всегда вставлять произвольный XML в любом месте документа SVG. Но тогда у вас нет средств для определения того, как окружающий SVG должен реагировать на содержимое. Собственно, в соответствующем обозревателе он совсем не реагирует, данные просто будут опущены.<br> + Поэтому спецификация добавляет элемент <code>{{ SVGElement("foreignObject") }}</code> в SVG. Его единственная цель - быть контейнером для другой разметки и носителем для атрибутов стиля SVG (наиболее заметны ширина и высота для определения пространства, которое будет занимать объект).</p> + +<p>Элемент <code>foreignObject</code> - хороший способ вставки XHTML в SVG. Если у вас есть более длинные тексты, макет HTML более подходит и удобен, чем текстовый элемент SVG. Другим часто упоминаемым примером использования является вложение формул с MathML. Для научных приложений SVG это очень хороший способ вступить в оба мира.</p> + +<div class="note"><strong>Note:</strong> Please keep in mind, that the content of the <code>foreignObject</code> must be processable by the viewer. A standalone SVG viewer is unlikely to be able to render HTML or MathML.</div> + +<p>Поскольку <code>foreignObject</code> является элементом SVG, вы можете, как и в случае с изображением, использовать с ним любую добросовестность SVG, которая затем будет применяться к его контенту.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p> diff --git a/files/ru/web/svg/tutorial/paths/index.html b/files/ru/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..63d4cf6412 --- /dev/null +++ b/files/ru/web/svg/tutorial/paths/index.html @@ -0,0 +1,234 @@ +--- +title: Пути (paths) +slug: Web/SVG/Tutorial/Paths +translation_of: Web/SVG/Tutorial/Paths +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> + +<p>Элемент <a href="/en-US/Web/SVG/Element/path"><code><path></code></a> ("путь")– наиболее мощный элемент в библиотеке <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">основных форм</a> SVG. С его помощью можно создавать отрезки, кривые, дуги и многое другое.</p> + +<p>С помощью элементов <code><a href="/en-US/Web/SVG/Element/path"><path></a></code> создают сложные формы, объединяя многочисленные прямые и кривые линии. Сложные формы из одних только прямых линий можно создавать и через элемент <code><a href="/en-US/docs/">polyline</a></code>. Хотя результаты работы обоих элементов могут быть похожи, элемент <code>polyline </code>отображает кривые как много маленьких прямых линий, что не очень хорошо масштабируется до больших размеров. Хорошее понимание path важно при рисовании SVG. При создании сложных paths не рекомендуется использовать XML или текстовые редакторы – понимание, как они работают, позволит установить и исправить проблемы с отображением SVG.</p> + +<p>Форма элемента path определяется одним атрибутом: {{ SVGAttr("d") }} (смотри подробности в <a href="/en-US/docs/">основные формы</a>). Атрибут <code>d</code> содержит серию команд и параметров, используемых этими командами. Мы опишем доступные команды и покажем примеры того, что они делают.</p> + +<p>Каждая команда обозначается специальной буквой. Например, нам надо переместиться в точку с координатами (10,10). Команда "Передвинуть к" вызывается буквой M. Когда синтаксический анализатор наталкивается на эту команду, он знает, что необходимо переместиться к указанной точке. Итак, для перемещения к точке (10,10) используется команда "M 10 10", и далее синтаксический анализатор переходит к следующей команде.</p> + +<p>Все команды существуют в двух вариантах: вызов команды с <strong>заглавной буквы</strong> обозначает абсолютные координаты на странице, а команда со <strong>строчной буквой </strong>-относительные (например, <em>перемещение от последней точки</em> <em>на</em> <em>10px вверх и 7px влево</em>).</p> + +<p>Координаты в атрибуте <code>d</code> всегда пишутся без указания единиц измерения<strong> </strong>и находятся в системе пользовательских координат (обычно это пиксели). Позже мы рассмотрим, как элемент paths может быть трансформирован для других нужд.</p> + +<h2 id="Команды_линии">Команды линии</h2> + +<p>Существуют пять команд линии для узлов <code><path></code>. Первая команда - это "Переместиться к", или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда "Переместиться к" используется в начале элемента <code><path></code> для указания точки, откуда начнется рисование, например:</p> + +<pre>M x y +</pre> + +<p>или</p> + +<pre>m dx dy</pre> + +<p>Следующий пример рисует одну только точку (10,10). Заметьте, однако, что при обычном использовании <code><path></code> она вообще не была бы видна.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10"/> + + <!-- Точки --> + <circle cx="10" cy="10" r="2" fill="red"/> + +</svg></pre> + +<p>Существуют три команды, которые рисуют линии. Самая общая - команда "Линия к", вызываемая буквой L. Эта команда принимает два параметра - координаты точки x и y - и рисует линию от текущего положения к этой точке.</p> + +<pre> L x y (или l dx dy) +</pre> + +<p>Для рисования горизонтальных и вертикальных линий есть две укороченные формы . H рисует горизонтальную линию, а V рисует вертикальную линию. Обе команды используют только один аргумент, так как они движутся только в одном направлении.</p> + +<pre> H x (или h dx) + V y (или v dy) +</pre> + +<p>Начнем с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента <code><rect></code>). Он состоит только из горизонтальных и вертикальных линий<span style="line-height: 1.5;">:</span></p> + +<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 H 90 V 90 H 10 L 10 10"/> + + <!-- Точки --> + <circle cx="10" cy="10" r="2" fill="red"/> + <circle cx="90" cy="90" r="2" fill="red"/> + <circle cx="90" cy="10" r="2" fill="red"/> + <circle cx="10" cy="90" r="2" fill="red"/> + +</svg></pre> + +<p>Нашу запись в примере выше можно немного сократить , используя команду "Закрыть путь", <code>Z</code>. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для нее регистр буквы не важен.</p> + +<pre> Z (или z) +</pre> + +<p>Таким образом наш путь из примера можно сократить до:</p> + +<pre class="brush: xml"> <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> +</pre> + +<p>Точно такую же картину можно получить с помощью относительных форм этих команд. Как уже говорилось, относительные команды вызываются использованием букв нижнего регистра и перемещают курсор относительно его последнего положения, а не к точным координатам . В нашем примере, поскольку размеры нашего квадрата - 80 x 80, элемент <code><path></code> можно записать так:</p> + +<pre class="brush: xml"> <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> +</pre> + +<p>Путь начнется от точки (10,10), пойдет горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.</p> + +<p>Возможно, в этих примерах было бы проще использовать элементы <code><polygon></code> или <code><polyline></code>.<code> </code>Однако, пути используются при рисовании SVG настолько часто, что многим разработчикам может быть удобнее использовать их вместо других элементов. Нет никакой разницы в производительности при использовании того или другого.</p> + +<h2 id="Команды_кривых_линий">Команды кривых линий</h2> + +<p>Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых - кривые Безье, а третья - "дуга", или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. Информации о кривых Безье слишком много, чтобы попытаться охватить ее здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.</p> + +<h3 id="Кривые_Безье">Кривые Безье</h3> + +<p>Кубическая кривая, C, представляет собой немного более сложную кривую. Кубическая Безье принимает две контрольные точки для каждой точки. Таким образом, чтобы создать кубическую кривую Безье, вам необходимо указать три набора координат.</p> + +<pre> C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) +</pre> + +<p>Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие - контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создает плавную кривую, которая ведет от наклона, который вы установили в начале вашей линии к наклону на другом конце.</p> + +<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> + <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> + <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> + <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> + <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> + <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> + <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> + <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> + <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> + +</svg> +</pre> + +<p>Пример сверху показывает девять кубических кривых Безье. Чем ближе к левому краю изображения, тем более горизонтально разделенными становятся контрольные точки. Ближе к правому, становятся более отделенными от конечных точек. Стоит отметить, что кривая начинается в направлении первой контрольной точки, а затем изгибается, переходя в направление второй контрольной точки.</p> + +<p>Вы можете связать вместе несколько кривых Безье, чтобы создавать более длинные плавные формы. В таком случае часто контрольные точки на разных сторонах будут отображением друг друга (чтобы поддерживать постоянный наклон). В этом случае можно использовать сокращенную запись для кривой Безье, используя команду S (или s).</p> + +<pre> S x2 y2, x y (or s dx2 dy2, dx dy) +</pre> + +<p>Команда S задаёт тот же тип кривой, что и был, но если он следует за другой S или C командой, подразумевается, что первая контрольная точка - отражение той, что использовалась перед этим. Если команда S не следует за другой командой S или C, то подразумевается, что обе контрольные точки для кривой одинаковы. Пример синтаксиса показан ниже. В фигуре слева контрольные точки показаны красным, а подразумеваемая контрольная точка - синим.</p> + +<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Другой тип кривой Безье - квадратичная кривая, задаётся командой Q. Квадратичная кривая проще, чем кубическая: для неё требуется только одна контрольная точка, которая определяет наклон кривой как в начальной, так и в конечной точке. Она принимает два аргумента: контрольную точку и конец кривой.</p> + +<pre> Q x1 y1, x y (or q dx1 dy1, dx dy) +</pre> + +<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Как и в случае кубической кривой Безье, существует сокращение для соединения нескольких квадратичных кривых Безье -T.</p> + +<pre> T x y (or t dx dy) +</pre> + +<p>Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из нее новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки.</p> + +<div class="blockIndicator note"> +<p>Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.</p> +</div> + +<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>Обе кривые дают похожие результаты, но кубическая кривая позволяет больше свободы в том, как должна выглядеть кривая. Решение, какую кривую использовать - ситуационное и зависит от количества симметрии в линиях.</p> + +<h3 id="Arcs" name="Arcs">Дуги</h3> + +<p>Другой тип кривых линий, которые можно создать с помощью SVG - дуга (команда A). Дуги - секции кругов или эллипсов. При заданных x- и y-радиусах есть два эллипса, которые могут соединяться любыми двумя точками (пока они находятся внутри радиуса круга). Вдоль любого из этих кругов есть два пути, которые могут испольовать для соединения точек, так что в любой ситуации возможно 4 дуги.</p> + +<pre> A rx ry x-axis-rotation large-arc-flag sweep-flag x y + a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy +</pre> + +<p>В начале элемент дуги принимает два аргумента радиусов. Если нужно, обратитесь к разделу <a href="https://developer.mozilla.org/en-US/Web/SVG/Element/ellipse">Эллипсы</a>, чтобы увидеть, как они работают. Последние два аргумента предназначены для обозначения координат окончания дуги. Вместе эти четыре значения определяют основную структуры дуги.</p> + +<p>Третий параметр описывает поворот дуги. См. пример ниже</p> + +<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p> + +<pre class="brush: xml"><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 315 + L 110 215 + A 30 50 0 0 1 162.55 162.45 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> +</svg></pre> + +<p>Пример показывает элемент <em>path</em>, который проходит по странице диагонально. В центре этого элемента вырезаны две эллиптические дуги (радиус x = 30, радиус y = 50). В первой дуге параметр <em>x-asix-rotation = 0</em>, а это означает, что эллипс, по которому проходит дуга (показан серым) расположен вертикально. Во второй дуге параметр <em>x-asix-rotation = -45. </em>Это поворачивает эллипс так, что направление его малой оси совпадает с направлением пути, как это видно на рисунке выше.</p> + +<p>Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - <em>large-arc-flag. </em>Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - <em>sweep-flag. </em>Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.</p> + +<p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png"></p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"> + <path d="M 10 315 + L 110 215 + A 36 60 0 0 1 150.71 170.29 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> + <circle cx="150.71" cy="170.29" r="2" fill="red"/> + <circle cx="110" cy="215" r="2" fill="red"/> + <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/> + <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/> +</svg></pre> + +<p>Заметьте, что каждый голубой эллипс сформирован двумя дугами, в завимости от того движетесь ли вы по часовой или против часовой стрелке. Каждый эллипс имеет короткую и длинную дуги. Оба эллипса просто зеркальные отражения друг друга. Они отражены вдоль линии, сформированной start->end точками.</p> + +<p>Если start->end точки расположены далеко и не попадают в пределы радусов эллипсов по x и y, то в этом случае радуисы эллипсов будут увеличены до величины, нужной чтобы достичь точек start->end. Интерактивный codepen внизу этой страницы наглядно это демонстрирует. Для определения достаточны ли велики радиусы ваших эллипсов чтобы требовать увеличения, вам нужно решить систему уравнений подобную <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F36%5E2)+%2B+((215+-+y)%5E2%2F60%5E2)+%3D+1,+((150.71+-+x)%5E2%2F36%5E2)+%2B+((170.29+-+y)%5E2%2F60%5E2)+%3D+1">этой на wolfram alpha</a>. Это вычислиние для non-rotated эллипса с start->end (110, 215)->(150.71, 170.29). Решенимем, (x, y), является центр эллипса(ов). Следющее вычисление для non-rotated эллипса с start->end (110, 215)->(162.55, 162.45). Решение будет <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F30%5E2)+%2B+((215+-+y)%5E2%2F50%5E2)+%3D+1,+((162.55+-+x)%5E2%2F30%5E2)+%2B+((162.45+-+y)%5E2%2F50%5E2)+%3D+1">мнимым</a> если радиусы ваших эллипсов слишком малы. Решение содержит небольшой мнимый компонент потому, что эллипсы были лишь слегка расширены.</p> + +<p>Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент - <em>large-arc-flag. </em>Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент - <em>sweep-flag. </em>Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> + <path d="M80 80 + A 45 45, 0, 0, 0, 125 125 + L 125 80 Z" fill="green"/> + <path d="M230 80 + A 45 45, 0, 1, 0, 275 125 + L 275 80 Z" fill="red"/> + <path d="M80 230 + A 45 45, 0, 0, 1, 125 275 + L 125 230 Z" fill="purple"/> + <path d="M230 230 + A 45 45, 0, 1, 1, 275 275 + L 275 230 Z" fill="blue"/> +</svg></pre> + +<p>Последние два аргумента, если вы ещё не догадались, обозначают координаты x и y, где заканчивается дуга. Дуги - лёгкий способ создавать части кругов или эллипсов в ваших рисунках. Например, круговая диаграмма требует отдельную дугу для каждого куска диаграммы.</p> + +<p>Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определен. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (протестировано только в Хром и Файрфокс, может не работать в вашем браузере)</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/ru/web/svg/tutorial/patterns/index.html b/files/ru/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..1db8bc9448 --- /dev/null +++ b/files/ru/web/svg/tutorial/patterns/index.html @@ -0,0 +1,76 @@ +--- +title: Шаблоны +slug: Web/SVG/Tutorial/Patterns +translation_of: Web/SVG/Tutorial/Patterns +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p> + +<h2 id="Шаблоны_Patterns">Шаблоны (Patterns)</h2> + +<p>Patterns, по моему мнению, одни из самых запутанных типов заполнения (<strong>fill </strong>types) в SVG. Несмотря на это ,они являются очень мощным инструментом, так что о них определенно стоит поговорить и понять хотя бы основные части. Как и градиенты, элементы {{SVGElement('pattern')}} должны быть помещены в секцию <code><defs> в Вашем SVG-файле.</code></p> + +<pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> +</svg></pre> + +<p>{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}</p> + +<p>Внутри элемента <pattern> вы можете использовать любые другие основные фигуры, которые использовались ранее. И каждая из них может быть стилизована, используя любые из возможных вариантов стилизаций, которые Вы изучали до этого, включая градиенты и прозрачность. Выше мы просто нарисовали два прямоугольника внутри нашего шаблона (которые перекрываются, и один из которых в два раза больше другого и используется для заполнения всего шаблона), и один круг.</p> + +<p>Сбивающая с толку вещь - это определение единиц измерения и размера. В примере выше мы определили ширину и высоту соответствующими аттрибутами внутри паттерна, что бы указать как далеко паттерн будет "продолжаться", прежде чем начать повторяться. Также доступны <strong>x</strong> и <strong>y</strong> атрибуты для смещения стартовой точки этого прямоугольника в том месте где вы его отрисовываете. Причина по которой они тут использованы, описана ниже.</p> + +<p>Как и с <strong><code>gradientUnits</code></strong> атрибутом, использованном ранее, у паттерна также есть атрибут <strong><code>patternUnits</code> </strong>. Он определяет единицы измерения, которые принимают атрибуты. По дефолту используется значене "<strong>objectBoundingBox</strong>", (как и в предыдущем разделе). Так что значения от 0 до 1 будут масштабированы в зависимости от размеров объекта, к которому вы применяете паттерн. Поскольку в данном случае мы хотим, чтобы шаблон повторялся 4 раза по горизонтали и вертикали, ширину и высоту мы установили в значение 0.25. Что означает 0.25 от размера целевого объекта</p> + +<p>В отличие от градиентов, у паттернов есть 2ой атрибут - <code><strong>patternContentUnits</strong>, </code>который описывает единицы измерения, используемые в базовых фигурах внутри элемента <strong>pattern</strong>. Дефолтное значение для этого атрибута - <strong>userSpaceOnUse</strong>, противоположность атрибуту <code><strong>patternUnits</strong>. </code>Это означает, что если Вы не укажете один или оба этих атрибута (<strong><code>patternContentUnits</code> </strong>и/или <strong><code>patternUnits</code></strong>), фигуры, которые Вы будете рисовать внутри блока <<strong>pattern></strong>, будут отрисованы в другой системе координат (отличной от той, которую использует паттерн). Это может немного запутывать, если Вы пишете код вручную.</p> + +<p>Чтобы сделать эту работу в приведенном выше примере, нам пришлось рассмотреть размер нашей коробки (200 пикселей) и тот факт, что мы хотели, чтобы рисунок повторялся 4 раза по горизонтали и по вертикали. Это означает, что каждый блок шаблонов был квадратом 50 × 50. Затем два прямоугольника и круг внутри рисунка были рассчитаны на размер в коробке 50x50.<br> + Все, что мы нарисовали вне этой коробки, не было бы показано. Шаблон также должен был быть смещен на 10 пикселей, чтобы он начинался в верхнем левом углу нашего окна, поэтому атрибуты <strong>x</strong> и <strong>y</strong> шаблона должны были быть скорректированы до 10/200 = 0,05.</p> + + + +<p>Здесь предостережение заключается в том, что если объект изменяет размер, сам шаблон будет масштабироваться, чтобы соответствовать ему, но объекты внутри не будут. Таким образом, хотя у нас все еще будет 4 повторяющихся блока внутри шаблона, объекты, составляющие этот шаблон, будут оставаться одного и того же размера, и вы окажетесь в больших областях между ними.<br> + Изменяя атрибут <strong><code>patternContentUnits</code></strong> , мы можем поместить все элементы в одну единую систему:</p> + +<pre class="brush: xml"> <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> + +<p>Теперь, поскольку содержимое шаблона находится в той же единичной системе, что и шаблон, нам не нужно смещать поле так, чтобы шаблон начинался в правильном месте, и если размер объекта был изменен на более крупный, шаблон автоматически масштабируется так, чтобы в нем было одинаковое количество объектов, повторяющихся внутри него. Это контрастирует с системой <strong>userSpaceOnUse</strong>, где, если объект изменяет размер, шаблон останется прежним и просто повторится больше раз, чтобы заполнить поле.</p> + +<p>Как ни удивительно, но в кругах Gecko, похоже, есть проблемы с рисованием, если их радиус установлен на что-то меньшее 0.075 (хотя их нужно масштабировать, чтобы иметь гораздо больший радиус, чем этот. Это может быть ошибкой только в шаблоне , Или вообще не ошибка, я не уверен).<br> + Чтобы обойти это, вероятно, лучше всего избегать рисования блоков «objectBoundingBox», если вам это не нужно.</p> + +<p>Ни одно из этих применений не является тем, о чем обычно думают, когда вы думаете о шаблоне. Шаблоны обычно имеют заданный размер и повторяются независимо от формы объекта. Чтобы создать что-то подобное - шаблон и его содержимое должны быть нарисованы в текущем userSpace, чтобы они не меняли форму, если объект:</p> + +<pre class="brush: xml"> <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> + +<p>Конечно, это означает, что шаблон не будет масштабироваться, если вы позже измените размер своего объекта. Все три из приведенных выше примеров показаны ниже на прямоугольнике, который слегка удлинен до высоты 300 пикселей, но я должен отметить его не исчерпывающее изображение, и есть другие варианты, доступные в зависимости от вашего приложения.</p> + +<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p> diff --git a/files/ru/web/svg/tutorial/svg_fonts/index.html b/files/ru/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..92cdb57f84 --- /dev/null +++ b/files/ru/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,98 @@ +--- +title: SVG шрифты +slug: Web/SVG/Tutorial/SVG_fonts +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>Когда был написан стандарт SVG, поддержка веб-шрифтов еще не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.<br> + </p> + +<p class="note"><strong>SVG-шрифты корректно поддерживаются только в Safari.</strong><br> + Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили ее реализацию на неопределенное время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.</p> + +<p class="syntaxbox">Элемент {{ SVGElement("font") }} используется для определения SVG-шрифта.</p> + +<h2 id="Установка_шрифта">Установка шрифта</h2> + +<p> </p> + +<p>Есть некоторые нюансы, необходимые для вставки шрифта в SVG. Давайте рассмотрим пример объявления (указанный<a href="http://www.w3.org/TR/SVG/fonts.html#FontElement"> в спецификации</a>), и объясним детали.<br> + </p> + +<pre><font id="Font1" horiz-adv-x="1000"> + <font-face font-family="Super Sans" font-weight="bold" font-style="normal" + units-per-em="1000" cap-height="600" x-height="400" + ascent="700" descent="300" + alphabetic="0" mathematical="350" ideographic="400" hanging="500"> + <font-face-src> + <font-face-name name="Super Sans Bold"/> + </font-face-src> + </font-face> + <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> + <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph> + <glyph unicode="@"><!-- Outline of @ glyph --></glyph> + <!-- more glyphs --> +</font> +</pre> + +<p>Начнем с элемента {{ SVGElement("font") }}. Он имеет атрибут <code>id</code>, который позволяет ему ссылаться через URI (см. ниже). Атрибут <code>horiz-adv-x</code> определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки. </p> + +<p>Элемент {{ SVGElement("font-face") }} является в SVG эквивалентом объявления шрифта с помощью CSS-свойства <a href="https://developer.mozilla.org/en/CSS/@font-face">@font-face</a>. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведенном выше примере, первое и самое важное свойство, которое должно быть определено - это <code>font-family</code>, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты <code>font-weight</code> и <code>font-style</code> имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз <a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">выносных элементов</a>.</p> + +<p>Дочерний элемент {{ SVGElement("font-face-src") }} соответствует свойству <code>src</code> для атрибута <code>@font-face</code> в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов {{ SVGElement("font-face-name") }} и {{ SVGElement("font-face-uri") }}. В приведенном выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.</p> + +<p>Следующий элемент за {{ SVGElement("font-face-src") }} - это {{ SVGElement("missing-glyph") }}. Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже {{ SVGElement("filter") }}, {{ SVGElement("a") }} или {{ SVGElement("script") }}. Однако для простых глифов вы можете просто добавить атрибут <code>d</code> - он определяет форму для глифа точно так же, как работают стандартные пути SVG.</p> + +<p>Сами глифы затем определяются элементами {{ SVGElement("glyph") }}. Наиболее важным атрибутом является <code>unicode</code>. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут {{htmlattrxref("lang")}} на глифе, вы можете дополнительно ограничить его определенными языками (представленными <code>xml:lang</code>). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.<br> + <br> + Есть еще два элемента, которые могут быть определены внутри шрифта: {{ SVGElement("hkern") }} и {{ SVGElement("vkern") }}. Каждый из них содержит ссылки не менее чем на два символа (атрибуты <code>u1</code> и <code>u2</code>) и атрибут <code>k</code>, который определяет, на сколько должно быть уменьшено расстояние между этими символами. Ниже показан пример инструкции размещения символов «A» и «V» на стандартном расстоянии.</p> + +<pre><hkern u1="A" u2="V" k="20" /> +</pre> + +<h2 id="Ссылка_на_шрифт">Ссылка на шрифт</h2> + +<p>После того как вы описали шрифт, как показано выше, вы можете просто применить атрибут <code>font-family</code> для использования шрифта в тексте SVG: </p> + +<pre><font> + <font-face font-family="Super Sans" /> + <!-- and so on --> +</font> + +<text font-family="Super Sans">My text uses Super Sans</text> +</pre> + +<p>Тем не менее, вы можете объединить несколько методов для того чтобы определить как и где использовать шрифт.</p> + +<h3 id="Опция_использование_CSS_font-face">Опция: использование CSS @font-face</h3> + +<p>Вы можете использовать свойство <code>@font-face</code> для ссылки на внешние шрифты:</p> + +<pre><font id="Super_Sans"> + <!-- and so on --> +</font> + +<style type="text/css"> +@font-face { + font-family: "Super Sans"; + src: url(#Super_Sans); +} +</style> + +<text font-family="Super Sans">My text uses Super Sans</text></pre> + +<h3 id="Опция_ссылка_на_внешний_шрифт">Опция: ссылка на внешний шрифт</h3> + +<p>Элемент <code>font-face-uri</code> позволяет ссылаться на внешний шрифт, следовательно, его можно использовать в нескольких местах:</p> + +<pre><font> + <font-face font-family="Super Sans"> + <font-face-src> + <font-face-uri xlink:href="fonts.svg#Super_Sans" /> + </font-face-src> + </font-face> +</font> +</pre> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> diff --git a/files/ru/web/svg/tutorial/svg_image_tag/index.html b/files/ru/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..1791c5b8fb --- /dev/null +++ b/files/ru/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,34 @@ +--- +title: SVG image element +slug: Web/SVG/Tutorial/SVG_Image_Tag +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> + +<p>SVG тег {{ SVGElement("image") }} позволяет выводить растровые изображения внутри SVG-объектов.</p> + +<p>В примере ниже растровое изображение <strong>a.jpg</strong>, заданное при помощи атрибута {{ SVGAttr("href") }}, отображено внутри SVG-объекта:</p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="5cm" height="4cm" version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> + <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> +</svg></pre> + +<div class="warning"> +<p>Важные замечания (подробнее <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3 specs</a>):</p> +</div> + +<ul> + <li> + <p>Если параметры <strong>x</strong> или <strong>y</strong> не заданы, то им будут присвоены значения равные <strong>0</strong>.</p> + </li> + <li> + <p>Если параметры <strong>height</strong> или <strong>width</strong> не заданы, то им будут присвоены значения равные <strong>0</strong>.</p> + </li> + <li>Если значение любого из параметров изображения <strong>height</strong> или <strong>width</strong> равны <strong>0</strong>, то отображение отключено.</li> +</ul> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> diff --git a/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..fc3ab83319 --- /dev/null +++ b/files/ru/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,115 @@ +--- +title: SVG в HTML. Введение +slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +<h2 id="Overview" name="Overview">Описание</h2> + +<p>Эта статья содержит пример использования SVG в качестве фонового изображения для формы. В примере демонстрируется, как JavaScript и CSS может быть использован для того, чтобы производить операции с векторным изображением (svg) так, будто вы используете обычный сценарий для XHTML. Необходимо понимать, что пример работоспособен лишь в браузерах, которые поддерживают XHTML (не HTML), а также интеграцию SVG.</p> + +<h2 id="Source" name="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" name="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" name="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>- тоже cохраняет пропорции, но масштабирует по максимальной границе области просмотра, обрезая часть изображения, которая не поместиласть в область</p> + +<p>Также есть спецификатор <code>none который означает, что изображение заполнит область путем масштабирования сторон, не сохраняя пропорции (растянет).</code></p> + +<pre class="brush: html"> preserveAspectRatio="none"</pre> + +<p>Атрибут <code>style </code>применяется для определения стиля элемента.</p> + +<h2 id="Related_Links" name="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> diff --git a/files/ru/web/svg/tutorial/texts/index.html b/files/ru/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..29170aae1e --- /dev/null +++ b/files/ru/web/svg/tutorial/texts/index.html @@ -0,0 +1,74 @@ +--- +title: Текст +slug: Web/SVG/Tutorial/Texts +translation_of: Web/SVG/Tutorial/Texts +--- +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> + +<p> </p> + +<p>Говоря о тексте в SVG мы должны различать две отдельные темы. Первая это добавление и отображение текста в изображении, а вторая - SVG шрифты. Последняя будет описана в следующем разделе этого туториала, а пока мы полностью сфокусируемся на первой части: добавление текста в SVG изображение.</p> + +<h2 id="Основы">Основы</h2> + +<p>В <a href="ru/docs/Web/SVG/Tutorial/Getting_Started">getting started</a> мы уже видели, что элемент <code>text</code> может использоваться для размещения произвольного текста в SVG документах:</p> + +<pre class="brush:xml"><text x="10" y="10">Hello World!</text> +</pre> + +<p>Атрибуты <code>x</code> и <code>y</code> задают расположение текста на экране. Атрибут <code>text-anchor</code>, который может иметь значение start, middle, end или inherit, определяет в каком направлении выравнивать текст относительно заданной точки. <br> + <br> + Как и для фигур, тексту можно задать цвет с помощью атрибута <code>fill</code> и обводку, используя атрибут <code>stroke</code>. Оба могут быть использованы с <code>gradient</code> и <code>pattern</code> элементами, что делает простое изменение цвета текста в SVG очень мощным по сравнению с CSS 2.1.</p> + +<h2 id="Настройка_свойств_шрифта">Настройка свойств шрифта</h2> + +<p>Шрифт, в котором отображается текст очень важен. SVG предлагает набор атрибутов (многие из которых похожи на их CSS аналоги), позволяющий настроить шрифт. Каждое из следующих свойств может быть установлено как атрибут или с помощью CSS декларации: <code>font-family</code>, <code>font-style</code>, <code>font-weight</code>, <code>font-variant</code>, <code>font-stretch</code>, <code>font-size</code>, <code>font-size-adjust</code>, <code>kerning</code>, <code>letter-spacing</code>, <code>word-spacing</code> и <code>text-decoration</code>.</p> + +<h2 id="Другие_текстовые_элементы">Другие текстовые элементы</h2> + +<h3 id="tspan">tspan</h3> + +<p>Этот элемент используется для выделения частей длинного текста. Он должен быть вложенным в <code>text</code> элемент или в другой <code>tspan</code> элемент. Примером является выделение одного слова в предложении красным цветом. </p> + +<pre class="brush:xml"><text> + <tspan font-weight="bold" fill="red">This is bold and red</tspan> +</text> +</pre> + +<p>Элемент <code>tspan</code> имеет следующие атрибуты:<br> + <br> + <strong>x</strong><br> + Задает новую координату по Х (аналогично абсолютному позиционированию в CSS) для вложенного текста. Что перезаписывает, установленную по-умолчанию позицию. Атрибут может также содержать набор чисел, которые поочередно применяются к каждому символу <code>tspan</code>.</p> + +<p><strong>dx</strong><br> + Задает смещение по горизонтали <code>dx</code> относительно текущей позиции. Здесь вы также можете задавать набор значений, которые последовательно применяются к каждому символу, устанавливая смещение относительно предыдущего.</p> + +<p>Аналогично, для вертикального перемещения текста имеются <strong>y</strong> и <strong>dy</strong> атрибуты.<br> + <br> + <strong>rotate</strong><br> + Поворачивает символ на заданный угол. Атрибуту можно задавать набор чисел, которые поочередно применяются к символам. Если количество чисел в наборе меньше чем количество букв, то угол для всех оставшихся символов будет равен последнему значению в наборе.<br> + <br> + <strong>textLength</strong><br> + Атрибут строго задает длину строки. Он предназначен для того, чтобы механизм рендеринга мог точно настраивать позиции глифов, когда измеренная длина текста не соответствует той, что указана в атрибуте.</p> + +<h3 id="tref">tref</h3> + +<p>Элемент <code>tref</code> позволяет ссылаться на уже существующий текст, эффективно копируя его на свое место. Вы можете использовать атрибут <code>xlink:href</code> чтобы указать на элемент, текст которого должен быть скопирован. Затем вы можете изменить его стили и внешний вид независимо от источника. </p> + +<pre class="brush:xml"><text id="example">This is an example text.</text> + +<text> + <tref xlink:href="#example" /> +</text> +</pre> + +<h3 id="textPath">textPath</h3> + +<p>Этот атрибут извлекает <code>path</code>, используя свой атрибут xlink:href и выравнивает вложенный текст по этому пути.</p> + +<pre class="brush:xml"><path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" /> +<text> + <textPath xlink:href="#my_path">This text follows a curve.</textPath> +</text></pre> + +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> diff --git a/files/ru/web/svg/tutorial/tools_for_svg/index.html b/files/ru/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..97a63678a3 --- /dev/null +++ b/files/ru/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,72 @@ +--- +title: Tools for SVG +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>Теперь, когда мы рассмотрели основы SVG, мы рассмотрим некоторые инструменты для работы с SVG файлами.</p> + +<h3 id="Browser_support">Browser support</h3> + +<p>As of Internet Explorer 9, all major browsers support SVG: IE 9, Mozilla Firefox, Safari, Google Chrome and Opera. Mobile devices with Webkit-based browsers also support SVG. On older or smaller devices, chances are that SVG Tiny is supported.</p> + +<h2 id="Inkscape">Inkscape</h2> + +<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p> + +<p>Очень важно иметь в инструментарии приличную графическую программу. Inkscape предлагает современную векторную графику с открытым исходным кодом.</p> + +<p>Кроме того, SVG является ее родным форматом. Для хранения специфичных для Inkscape данных, файл SVG расширяется элементами и атрибутами в пользовательском пространстве имен, что не мешает выбрать экспорт и в виде простого SVG.</p> + +<h2 id="Adobe_Illustrator">Adobe Illustrator</h2> + +<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> + +<p>Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.</p> + +<h2 id="Apache_Batik">Apache Batik</h2> + +<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> + +<p>Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.</p> + +<p>Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.</p> + +<p>Together with <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a> Batik can transform SVG to PDF.</p> + +<h3 id="Other_renderers">Other renderers</h3> + +<p>Several projects exist that can create a raster image from an SVG source. <a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a> is one of the most famous command-line image processing tools. The Gnome library <a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a> is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.</p> + +<h2 id="Raphael_JS">Raphael JS</h2> + +<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p> + +<p>This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.</p> + +<h2 id="Snap.svg">Snap.svg</h2> + +<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p> + +<p>A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.</p> + +<section id="sect1"> </section> + +<h2 id="Google_Docs">Google Docs</h2> + +<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> + +<p>Drawings from Google Docs can be exported as SVG.</p> + +<h2 id="Science">Science</h2> + +<p>The well-known plotting tools xfig and gnuplot both support exporting as SVG. To render graphs on the web <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/" title="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a> supports VML, SVG and canvas, automatically deciding which technology to use based on browser capabilities.</p> + +<p>In GIS (Geographic Information System) applications SVG is often used as both storage and rendering format. See <a class="external" href="http://carto.net">carto.net</a> for details.</p> + +<h2 id="More_tools!">More tools!</h2> + +<p>The W3C offers a <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">list of programs</a> that support SVG.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p> diff --git a/files/ru/web/svg/tutorial/базовые_преобразования/index.html b/files/ru/web/svg/tutorial/базовые_преобразования/index.html new file mode 100644 index 0000000000..6aa2b20b16 --- /dev/null +++ b/files/ru/web/svg/tutorial/базовые_преобразования/index.html @@ -0,0 +1,98 @@ +--- +title: Базовые трансформации +slug: Web/SVG/Tutorial/Базовые_Преобразования +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div> + +<p>Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель. Например:</p> + +<div id="two_blocks"> +<pre class="brush: html notranslate"><svg width="30" height="10"> + <g fill="red"> + <rect x="0" y="0" width="10" height="10" /> + <rect x="20" y="0" width="10" height="10" /> + </g> +</svg> +</pre> +</div> + +<p>{{ EmbedLiveSample('two_blocks', '30', '10', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> + +<p>Все последующие преобразования суммируются в атрибуте преобразования элемента <code>transform</code> . Преобразования могут быть последовательно суммированы, разделителем выступает пробел.</p> + +<h2 id="Перемещения">Перемещения</h2> + +<p>Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определенным атрибутам. Для этого используется <code>translate()</code>.</p> + +<pre class="brush: html notranslate"><svg width="40" height="50" style="background-color:#bff;"> + <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> +</svg> +</pre> + +<p>Пример генерирует прямоугольник, перемещенный в точку (30,40) вместо точки (0,0).</p> + +<p>{{ EmbedLiveSample('Translation', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> + +<p>если второе значение не задано, то оно приравнивается <var>0</var>.</p> + +<h2 id="Вращение">Вращение</h2> + +<p>Вращение элементов - это достаточно типичная задача. Используйте <code>rotate()</code> для этого:</p> + +<pre class="brush: html notranslate"><svg width="31" height="31"> + <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> +</svg> +</pre> + +<p>Данный пример показывает квадрат который повернули на 45 градусов. Значение для <code>rotate()</code> задается в градусах.</p> + +<p>{{ EmbedLiveSample('Rotation', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> + +<h2 id="Смещение_углов">Смещение углов</h2> + +<p>Чтобы сделать ромб из нашего прямоугольника, доступны преобразования skewX () и skewY (). Каждый из них принимает угол, определяющий, насколько элемент будет искажен.</p> + +<h2 id="Масштабирование">Масштабирование</h2> + +<p><code>scale()</code> изменяем размер элемента. Он использует 2 параметра. Первый - это коэффициент масшабирования по оси Х, а второй - по оси Y. Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, <var>0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.</var></p> + +<h2 id="Комплексные_перемещения_с_matrix"><strong id="docs-internal-guid-68ee5272-9619-cb26-01de-19a4df728cd5">Комплексные перемещения с <code>matrix()</code></strong></h2> + +<p>Все приведенные выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью <code>matrix(a, b, c, d, e, f)</code>, которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:</p> + +<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p> + +<p>См. <a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">конкретный пример документации SVG</a>. Подробную информацию об этом свойстве можно найти в <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG Рекомендациях</a>.</p> + +<h2 id="Эффекты_на_системе_координат">Эффекты на системе координат</h2> + +<p>В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повернуты, перемещены и смаштабированы в соотвествии с преобразованиями.</p> + +<pre class="brush: html notranslate"><svg width="100" height="100"> + <g transform="scale(2)"> + <rect width="50" height="50" /> + </g> +</svg> +</pre> + +<p>В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как <code>userSpaceOnUse</code>.</p> + +<p>{{ EmbedLiveSample('Effects_on_Coordinate_Systems', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> + +<h2 id="Встраивание_SVG_в_SVG">Встраивание SVG в SVG</h2> + +<p>В отличие от HTML, SVG позволяет встравивать другие <code>svg</code> элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя <code>viewBox</code>, <code>width</code> и<code>height</code> внутреннего <code>svg</code> элемнта.</p> + +<pre class="brush: html notranslate"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> + <svg width="100" height="100" viewBox="0 0 50 50"> + <rect width="50" height="50" /> + </svg> +</svg> +</pre> + +<p>На примере выше, так же как и на других примерах ранее, вы можете видеть такой же эффект увеличениея изображения в два раза.</p> + +<p>{{ EmbedLiveSample('Embedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}</p> + +<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div> diff --git a/files/ru/web/svg/tutorial/введение/index.html b/files/ru/web/svg/tutorial/введение/index.html new file mode 100644 index 0000000000..0ecb1c5f1c --- /dev/null +++ b/files/ru/web/svg/tutorial/введение/index.html @@ -0,0 +1,44 @@ +--- +title: Введение +slug: Web/SVG/Tutorial/Введение +tags: + - SVG + - Руководство +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}</p> + +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right; height: 418px; width: 235px;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> это язык <a href="/en-US/XML" title="en-US/XML">XML</a> разметки, схожий с <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путем указания всех необходимых линий и форм, путем модификации уже существующих растровых изображений, или путем комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.</p> + +<p>В 1999 году, после конкурса нескольких форматов, SVG был включен в <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a>, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными <a class="external" href="https://caniuse.com/#search=svg" title="en-US/W3C">браузерами</a>. Недостатком использования SVG является его медленная загрузка . При этом SVG дает некоторые преимущества, такие как наличие соответствующего <a href="/en-US/docs/Web/API">DOM interface</a>, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.</p> + +<h3 id="Базовые_компоненты">Базовые компоненты</h3> + +<p>В <a href="/en-US/docs/Web/HTML">HTML</a> имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента {{ SVGElement('svg') }} и нескольких основных форм, которые вместе обеспечивают построение рисунка. Кроме того, есть элемент {{ SVGElement('g') }}, который используется для группировки нескольких основных форм вместе.</p> + +<p>Начиная с этого, SVG изображение может стать сколь угодно сложным. SVG поддерживает градиенты, вращения, фильтры, анимации, взаимодействие с JavaScript, и т.п. Но все эти дополнительные возможности языка полагаются на этот относительно небольшой набор элементов, определяющих графическую область.</p> + +<h3 id="Before_you_start" name="Before_you_start">До начала работы</h3> + +<p>Существует ряд приложений для рисования, такие как <a class="external" href="http://www.inkscape.org/">Inkscape</a>, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> или <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p> + +<p>SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в <a href="http://caniuse.com/svg">Can I use</a>. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском. К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.</p> + +<p>Перед тем как начать, вы должны иметь основное понимание XML или другого языка разметки, такого как <abbr title="HyperText Markup Language">HTML</abbr>. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:</p> + +<ul> + <li>Элементы и атрибуты SVG должны быть все введены в указанном регистре, поскольку XML обладает чувствительностью к регистру (в отличии от HTML).</li> + <li>Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.</li> +</ul> + +<p>SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать <a href="/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">Справочник SVG элементов</a> и <a href="/ru/docs/DOM/DOM_Reference#SVG_интерфейсы">SVG интерфейсы</a>, чтобы найти что-либо еще при необходимости.</p> + +<h3 id="Особенности_SVG">Особенности SVG</h3> + +<p>Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. <a href="http://www.w3.org/TR/SVG/">Второй выпуск SVG 1.1</a> стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.</p> + +<p>Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.</p> + +<p>Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> diff --git a/files/ru/web/svg/tutorial/основные_фигуры/index.html b/files/ru/web/svg/tutorial/основные_фигуры/index.html new file mode 100644 index 0000000000..e95fd31f68 --- /dev/null +++ b/files/ru/web/svg/tutorial/основные_фигуры/index.html @@ -0,0 +1,144 @@ +--- +title: Основные Фигуры +slug: Web/SVG/Tutorial/Основные_Фигуры +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p> + +<p>Существует несколько основных фигур, используемых в большинстве рисунков SVG. Назначение этих фигур вполне очевидно из их имён. Мы привели здесь некоторые атрибуты, определяющие положение и размер, но спецификация элемента, вероятно, содержит более точное и полное описание, вместе с другими свойствами, не описанными здесь. Однако, так как они используются в большинстве документов SVG, важно иметь некоторое представление о них.</p> + +<h2 id="Basic_shapes" name="Basic_shapes">Основные формы</h2> + +<p>Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:</p> + +<p><img alt="" class="internal" src="/@api/deki/files/359/=Shapes.png" style="float: right;"></p> + +<pre class="brush:xml"><?xml version="1.0" standalone="no"?> +<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + + <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> + <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> + + <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> + <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" + stroke="orange" fill="transparent" stroke-width="5"/> + + <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" + stroke="green" fill="transparent" stroke-width="5"/> + + <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> +</svg></pre> + +<div class="note"><strong>Замечание:</strong> Атрибуты <code>stroke</code>, <code>stroke-width</code> и <code>fill</code> описываются в рукодстве далее.</div> + +<h3 id="Rectangles" name="Rectangles">Прямоугольники</h3> + +<p>Элемент <a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect">rect</a> делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.</p> + +<pre class="brush:xml"><rect x="10" y="10" width="30" height="30"/> +<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/></pre> + +<dl> + <dt>x</dt> + <dd>Положение x верхнего левого угла прямоугольника.</dd> + <dt>y</dt> + <dd>Положение y верхнего левого угла прямоугольника.</dd> + <dt>width</dt> + <dd>Ширина прямоугольника</dd> + <dt>height</dt> + <dd>Высота прямоугольника</dd> + <dt>rx</dt> + <dd>Радиус x углов прямоугольника</dd> + <dt>ry</dt> + <dd>Радиус y углов прямоугольника</dd> +</dl> + +<h3 id="Circle" name="Circle">Окружность</h3> + +<p>Как вы могли предположить, элемент <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle">circle</a> рисует окружность на экране. Существует 3 атрибута для описания этого элемента.</p> + +<pre class="brush:xml;gutter:false;"><circle cx="25" cy="75" r="20"/></pre> + +<dl> + <dt>r</dt> + <dd>Радиус окружности.</dd> + <dt>cx</dt> + <dd>Положение x центра окружности.</dd> + <dt>cy</dt> + <dd>Положение y центра окружности.</dd> +</dl> + +<h3 id="Ellipse" name="Ellipse">Эллипс</h3> + +<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a> - это наиболее общая форма элемента окружность, в котором можно маштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.</p> + +<pre class="brush:xml;gutter:false;"><ellipse cx="75" cy="75" rx="20" ry="5"/></pre> + +<dl> + <dt>rx</dt> + <dd>Радиус x эллипса.</dd> + <dt>ry</dt> + <dd>Радиус y эллипса.</dd> + <dt>cx</dt> + <dd>Положение x центра эллипса.</dd> + <dt>cy</dt> + <dd>Положение y центра эллипса.</dd> +</dl> + +<h3 id="Line" name="Line">Линия</h3> + +<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a> изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечне точки линии.</p> + +<pre class="brush:xml;gutter:false;"><line x1="10" x2="50" y1="110" y2="150"/></pre> + +<dl> + <dt>x1</dt> + <dd>Положение x точки 1.</dd> + <dt>y1</dt> + <dd>Положение y точки 1.</dd> + <dt>x2</dt> + <dd>Положение x точки 2.</dd> + <dt>y2</dt> + <dd>Положение y точки 2.</dd> +</dl> + +<h3 id="Polyline" name="Polyline">Ломаная линия</h3> + +<p>Элемент <a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">polyline</a> воспроизводит группу соединенных прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:</p> + +<pre class="brush:xml;gutter:false;"><polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/></pre> + +<dl> + <dt>точки</dt> + <dd>Список точек, каждая разделённая пробелом, запятой, <abbr title="Конец строки (англ. End of line)">EOL</abbr>, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: "0 0, 1 1, 2 2".</dd> +</dl> + +<h3 id="Polygon" name="Polygon">Многоугольник</h3> + +<p>Элемент <a href="/en-US/Web/SVG/Element/polygon" title="en-US/Web/SVG/Element/polygon">polygon</a> очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента <code><rect/></code> в случаях, когда необходимо большая гибкость.</p> + +<pre class="brush:xml;gutter:false;"><polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/></pre> + +<dl> + <dt>точки</dt> + <dd>Список точек, каждая разделённая пробелом, запятой, <abbr title="Конец строки (англ. End of line)">EOL</abbr>, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: "0 0, 1 1, 2 2". Полигон замыкается финальной прямой линией от (2,2) до (0,0).</dd> +</dl> + +<h3 id="Path" name="Path">Путь</h3> + +<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a>, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закругленными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">в следующей секции</a> этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.</p> + +<pre class="brush:xml;gutter:false;"><path d="M 20 230 Q 40 205, 50 230 T 90230"/></pre> + +<dl> + <dt>d</dt> + <dd>Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Пути</a>.</dd> +</dl> + +<div>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</div> diff --git a/files/ru/web/svg/tutorial/позиции/index.html b/files/ru/web/svg/tutorial/позиции/index.html new file mode 100644 index 0000000000..7a660c2d0f --- /dev/null +++ b/files/ru/web/svg/tutorial/позиции/index.html @@ -0,0 +1,48 @@ +--- +title: Расположение (позиции) +slug: Web/SVG/Tutorial/Позиции +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Positions +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p> + +<h2 id="The_grid" name="The_grid">Сетка</h2> + +<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется <a href="/en/HTML/Canvas" title="en/HTML/Canvas">canvas</a> (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.</p> + +<h4 id="Пример">Пример:</h4> + +<p>Элемент</p> + +<pre><rect x="0" y="0" width="100" height="100" /> +</pre> + +<p>определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.</p> + +<h3 id="Что_такое_пиксели">Что такое "пиксели"?</h3> + +<p>В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Маcштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.</p> + +<p>Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента <code>svg</code>:</p> + +<pre><svg width="100" height="100"> +</pre> + +<p>Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.</p> + +<pre><svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>> +</pre> + +<p>Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут <code>viewBox определяет часть этого полотна, которая будет отображаться</code>. Эти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.</p> + +<p>Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется <strong>системой пользовательских координат</strong>. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.</p> + +<p>Цитата из SVG 1.1 специфирования иллюстрирует это:</p> + +<blockquote> +<p>[...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)</p> +</blockquote> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p> diff --git a/files/ru/web/svg/элемент/a/index.html b/files/ru/web/svg/элемент/a/index.html new file mode 100644 index 0000000000..97c2daf793 --- /dev/null +++ b/files/ru/web/svg/элемент/a/index.html @@ -0,0 +1,151 @@ +--- +title: a +slug: Web/SVG/Элемент/a +tags: + - SVG +translation_of: Web/SVG/Element/a +--- +<div>{{SVGRef}}</div> + +<p>SVG элемент <strong><a></strong> создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML {{htmlelement("a")}}.</p> + +<p>Элемент <code><a></code> является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру.</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">@namespace svg url(http://www.w3.org/2000/svg); +html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Ссылка в фигуре --> + <a href="/docs/Web/SVG/Element/circle"> + <circle cx="50" cy="40" r="35"/> + </a> + + <!-- Ссылка в тексте --> + <a href="/docs/Web/SVG/Element/text"> + <text x="50" y="90" text-anchor="middle"> + &lt;circle&gt; + </text> + </a> +</svg></pre> + +<pre class="brush: js">/* Так как SVG не предоставляет визуальных стилей по-умолчанию для ссылок, + будет лучше задать самостоятельно */ + +@namespace svg url(http://www.w3.org/2000/svg); +/* Необходимо выделить только SVG элементы <a>, но не HTML. + Смотрите предупреждение ниже */ + +svg|a:link, svg|a:visited { + cursor: pointer; +} + +svg|a text, +text svg|a { + fill: blue; /* Даже для текста SVG использует заливку */ + text-decoration: underline; +} + +svg|a:hover, svg|a:active { + outline: dotted 1px blue; +}</pre> + +<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> + +<div class="blockIndicator warning"> +<p>Поскольку этот элемент разделяет своё имя с <a href="/ru/docs/Web/HTML/Element/A">элементом HTML <code><a></code></a>, выбор <code>a</code> через CSS или <a href="/ru/docs/Web/API/Document/querySelector"><code>querySelector</code></a> может выбрать не тот тип элемента. Попробуйте <a href="/ru/docs/Web/CSS/@namespace">правило <code>@namespace</code></a>, чтобы разделять их.</p> +</div> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt> + <dd>Указывает браузеру выполнить загрузку по {{Glossary("URL")}}, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально.<br> + <small><em>Тип</em>: <strong><string></strong> ;<em>Значение по-умолчанию</em>: <em>none</em>;<em>Анимируем</em>: <strong>нет</strong></small></dd> + <dt>{{SVGAttr("href")}}</dt> + <dd>{{Glossary("URL")}} или фрагмент URL для перехода.<br> + <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{htmlattrxref("hreflang", "a")}}</dt> + <dd>URL на человеческом языке или фрагмент URL для перехода.<br> + <small><em>Тип</em>: <strong><string></strong>; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt> + <dd>Разделённый пробелами список URL при переходе по которым браузер будет отправлять <code><a href="/ru/docs/Web/HTTP/Methods/POST">POST</a></code> запросы с телом <code>PING</code> (в фоне). Обычно используется для трекинга.<br> + <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#List-of-Ts"><list-of-URLs></a></strong>; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>нет</strong></small></dd> + <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt> + <dd>Какой <a href="/ru/docs/Web/HTTP/Заголовки/Referer">referrer</a> отправить при получении {{Glossary("URL")}}.<br> + <small><em>Тип</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>нет</strong></small></dd> + <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt> + <dd>Отношение между целевым объектом и объектом link.<br> + <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/HTML/Link_types"><list-of-Link-Types></a></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("target")}}</dt> + <dd>Где отобразить переход {{Glossary("URL")}}.<br> + <small><em>Тип</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong><name></strong> ; <em>Значение по-умолчанию</em>: <code>_self</code>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{htmlattrxref("type", "a")}}</dt> + <dd>{{Glossary("MIME type")}} для ссылки URL.<br> + <small><em>Тип</em>: <strong><string></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> + <dd>URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами.<br> + <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> +</dl> + +<h3 id="Глобальные_аттрибуты">Глобальные аттрибуты</h3> + +<dl> + <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Наиболее используемые: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd> + <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Наиболее используемые: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>XLink Attributes</dt> + <dd><small>Наиболее используемые: {{SVGAttr("xlink:title")}}</small></dd> + <dt>ARIA Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p>Этот элемент реализует интерфейс <code><a href="/ru/docs/DOM/SVGAElement" title="DOM/SVGAElement">SVGAElement</a></code>.</p> + +<h2 id="Примечания_к_использованию">Примечания к использованию</h2> + +<p>{{svginfo}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Аттрибут {{SVGAttr("xlink:href")}} заменён на {{SVGAttr("href")}}</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.a")}}</p> diff --git a/files/ru/web/svg/элемент/animate/index.html b/files/ru/web/svg/элемент/animate/index.html new file mode 100644 index 0000000000..90988b58f8 --- /dev/null +++ b/files/ru/web/svg/элемент/animate/index.html @@ -0,0 +1,81 @@ +--- +title: <animate> +slug: Web/SVG/Элемент/animate +tags: + - NeedsUpdate + - SVG + - SVG Animation + - svg анимация +translation_of: Web/SVG/Element/animate +--- +<div>{{SVGRef}}</div> + +<p> Тег <animate> может быть помещен внутри какой-то фигуры, например, <circle> . Он задает анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определенным интервалом.</p> + +<h2 id="Использование">Использование</h2> + +<p>{{svginfo}}</p> + +<h2 id="Пример">Пример</h2> + +<p>» <a href="/files/3258/animate.svg">animate.svg</a></p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationEvent">Animation event attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationTiming">Animation timing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Атрибуты_элемента">Атрибуты элемента</h3> + +<ul> + <li>{{SVGAttr("attributeName")}}</li> + <li>{{SVGAttr("attributeType")}}</li> + <li>{{SVGAttr("from")}}</li> + <li>{{SVGAttr("to")}}</li> + <li>{{SVGAttr("dur")}}</li> + <li>{{SVGAttr("repeatCount")}}</li> +</ul> + +<h2 id="DOM_интерфейс">DOM интерфейс</h2> + +<p>Элемент реализует <code><a href="/en-US/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code> интерфейс .</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG1.1', 'animate.html#AnimateElement', '<animate>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Поддерживаемые_браузеры">Поддерживаемые браузеры</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.animate")}}</p> + +<p> </p> diff --git a/files/ru/web/svg/элемент/animatemotion/index.html b/files/ru/web/svg/элемент/animatemotion/index.html new file mode 100644 index 0000000000..3b1259dcb3 --- /dev/null +++ b/files/ru/web/svg/элемент/animatemotion/index.html @@ -0,0 +1,112 @@ +--- +title: <animateMotion> +slug: Web/SVG/Элемент/animateMotion +tags: + - SVG + - svg анимация + - Элемент +translation_of: Web/SVG/Element/animateMotion +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><animateMotion></code></strong> вызывает перемещение ссылочного элемента вдоль пути движения.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/ru/docs/SVG/Attribute#Conditional_processing_attributes" title="en/SVG/Attribute#ConditionalProccessing">Условные атрибуты обработки</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Основные атрибуты</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Animation_event_attributes" title="en/SVG/Attribute#AnimationEvent">Атрибуты события анимации</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#XLink_attributes" title="en/SVG/Attribute#XLink">Атрибуты Xlink</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Animation_timing_attributes" title="en/SVG/Attribute#AnimationTiming">Атрибуты времени анимации</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Animation_value_attributes" title="en/SVG/Attribute#AnimationValue">Величина атрибутов анимации</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Animation_addition_attributes" title="en/SVG/Attribute#AnimationAddition">Атрибуты добавления анимации</a> » </li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Собственные_атрибуты">Собственные атрибуты</h3> + +<ul> + <li>{{SVGAttr("calcMode")}}</li> + <li>{{SVGAttr("path")}}</li> + <li>{{SVGAttr("keyPoints")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("origin")}}</li> +</ul> + +<h2 id="DOM_интерфейс">DOM интерфейс</h2> + +<p>Этот элемент реализует интерфейс {{domxref("SVGAnimateMotionElement")}}.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html; highlight[18-20]"><?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Рисуем серый контур движения с двумя + маленькими кружками в ключевых точках --> + <path id="theMotionPath" stroke="lightgrey" stroke-width="2" fill="none" + d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" /> + <circle cx="10" cy="110" r="3" fill="lightgrey" /> + <circle cx="110" cy="10" r="3" fill="lightgrey" /> + + <!-- Рисуем красный круг, который будет перемещаться + вдоль траектории движения. --> + <circle cx="" cy="" r="5" fill="red"> + + <!-- Определяем анимацию пути движения --> + <animateMotion dur="6s" repeatCount="indefinite"> + <mpath xlink:href="#theMotionPath"/> + </animateMotion> + </circle> +</svg></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Пример", 120, 120)}}</p> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> + +<p>{{Compat("svg.elements.animateMotion")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{SVGElement("mpath")}}</li> +</ul> diff --git a/files/ru/web/svg/элемент/circle/index.html b/files/ru/web/svg/элемент/circle/index.html new file mode 100644 index 0000000000..3f1907b3bf --- /dev/null +++ b/files/ru/web/svg/элемент/circle/index.html @@ -0,0 +1,109 @@ +--- +title: <circle> +slug: Web/SVG/Элемент/circle +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/circle +--- +<div>{{SVGRef}}</div> + +<p><code>Элемент circle</code> — базовая SVG фигура, используется для создания кругов c помощью координат центра и размера радиуса.</p> + +<h2 id="Информация">Информация</h2> + +<p>{{svginfo}}</p> + +<h2 id="Пример">Пример</h2> + + + +<pre class="brush: xml line-numbers language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + + + +<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg">circle.svg</a></p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Унаследованные">Унаследованные</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#Conditional_processing_attributes">Условные атрибуты</a> »</li> + <li><a href="/en-US/SVG/Attribute#Core_attributes">Ключевые атрибуты</a> »</li> + <li><a href="/en-US/SVG/Attribute#Graphical_event_attributes">Атрибуты графических событий</a> »</li> + <li><a href="/en-US/SVG/Attribute#Presentation_attributes">Атрибуты представления</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Особые">Особые</h3> + +<ul> + <li>{{ SVGAttr("cx") }}</li> +</ul> + +<p>Координата центра окружности по оси x.</p> + +<ul> + <li>{{ SVGAttr("cy") }}</li> +</ul> + +<p>Координата центра окружности по оси y.</p> + +<ul> + <li>{{ SVGAttr("r") }}</li> +</ul> + +<p>Радиус окружности.</p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Этот элемент</span> <span class="hps">реализует интерфейс</span></span> {{ domxref("SVGCircleElement") }}.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Состояние</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'shapes.html#CircleElement', '<circle>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#CircleElement', '<circle>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Исходное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.circle")}}</p> + + + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{ SVGElement("ellipse") }}</li> + <li><a href="https://www.svg-expert.ru/svg/circle/">SVG Circle</a></li> +</ul> diff --git a/files/ru/web/svg/элемент/defs/index.html b/files/ru/web/svg/элемент/defs/index.html new file mode 100644 index 0000000000..0312b05e34 --- /dev/null +++ b/files/ru/web/svg/элемент/defs/index.html @@ -0,0 +1,101 @@ +--- +title: <defs> +slug: Web/SVG/Элемент/defs +tags: + - NeedsUpdate + - SVG + - Контейнер SVG + - Элемент +translation_of: Web/SVG/Element/defs +--- +<div>{{SVGRef}}</div> + +<p>SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента <strong><code><defs></code></strong>. Объекты, созданные внутри элемента <code><defs></code> не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования.</p> + +<p>Создание подобных элементов внутри элемента <code><defs></code> способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент {{SVGElement("use")}}, чтобы отрисовать данные элементы в любом месте области просмотра.</p> + +<p><code><defs></code> также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута {{SVGAttr("x1")}}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3> + +<p><em>Нет</em></p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM </h2> + +<p>Элемент реализует интерфейс {{domxref("SVGDefsElement")}}.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml"><svg width="80px" height="30px" viewBox="0 0 80 30" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <linearGradient id="Gradient01"> + <stop offset="20%" stop-color="#39F" /> + <stop offset="90%" stop-color="#F3F" /> + </linearGradient> + </defs> + + <rect x="10" y="10" width="60" height="10" + fill="url(#Gradient01)" /> +</svg> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#Head", "<defs>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#Head", "<defs>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.defs")}}</p> + +<p> </p> + +<h2 id="Связанные_темы">Связанные темы</h2> + +<ul> + <li>{{SVGElement("use")}}</li> +</ul> diff --git a/files/ru/web/svg/элемент/ellipse/index.html b/files/ru/web/svg/элемент/ellipse/index.html new file mode 100644 index 0000000000..f04083c1e1 --- /dev/null +++ b/files/ru/web/svg/элемент/ellipse/index.html @@ -0,0 +1,129 @@ +--- +title: <ellipse> +slug: Web/SVG/Элемент/ellipse +tags: + - NeedsUpdate +translation_of: Web/SVG/Element/ellipse +--- +<div>{{SVGRef}}</div> + +<p>Элемент <code>ellipse</code> — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов.</p> + +<div class="blockIndicator note"> +<p>Сам по себе элемент <code>ellipse </code>не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45<strong>°</strong>), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}.</p> +</div> + + + +<div class="hidden"> +<pre><code>html,body,svg { height:100% }</code></pre> +</div> + +<pre><code><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <ellipse cx="100" cy="50" rx="100" ry="50" /> +</svg></code></pre> + +<p>{{EmbedLiveSample('Exemple', 100, '100%')}}</p> + + + +<h2 id="Атрибуты">Атрибуты</h2> + + + +<dl> + <dt>{{SVGAttr("cx")}}</dt> + <dd>Позиция эллипса по x.<br> + <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("cy")}}</dt> + <dd>Позиция эллипса по y.<br> + <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("rx")}}</dt> + <dd>Радиус эллипса по x.<br> + <small><em>Тип значения</em>: <code>auto</code>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ;<em>Значение по умолчанию</em>: <code>auto</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("ry")}}</dt> + <dd>Радиус эллипса по y.<br> + <small><em>Тип значения</em>: <code>auto</code>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Значение по умолчанию</em>: <code>auto</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>Этот атрибут позволяет установить длину всего пути.<br> + <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчани</em>: <em>нет</em>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dd> + + + <div class="blockIndicator note"> + <p><strong>Обратите внимание:</strong> Начиная с SVG2, <code>cx</code>, <code>cy</code>, <code>rx</code> и <code>ry</code> это <em>Геометрические свойства</em>. Это означает, что они могут быть использованы как CSS свойства элемента.</p> + </div> + + <h3 id="Глобальные_Атрибуты">Глобальные Атрибуты</h3> + </dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt> + <dd><small>Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Атрибуты стиля</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Условные атрибуты</a></dt> + <dd><small>Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Аттрибуты событий</dt> + <dd><small><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Глобальные атрибуты событий</a>, <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Атрибуты представления</a></dt> + <dd><small>Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA-Атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>,<code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>,<code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>,<code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>,<code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + + + + + +<h2 id="Информация">Информация</h2> + +<p>{{svginfo}}</p> + + + +<h2 id="Пример">Пример</h2> + +<p>» <a href="https://developer.mozilla.org/files/3253/ellipse.svg">ellipse.svg</a></p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Этот элемент</span> <span class="hps">реализует интерфейс </span></span>{{ domxref("SVGEllipseElement") }}.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Состояние</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Исходное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.ellipse")}}</p> + + + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{SVGElement("circle")}}</li> +</ul> diff --git a/files/ru/web/svg/элемент/feblend/index.html b/files/ru/web/svg/элемент/feblend/index.html new file mode 100644 index 0000000000..acd3547dcd --- /dev/null +++ b/files/ru/web/svg/элемент/feblend/index.html @@ -0,0 +1,115 @@ +--- +title: <feBlend> +slug: Web/SVG/Элемент/feBlend +tags: + - фильтры +translation_of: Web/SVG/Element/feBlend +--- +<div>{{SVGRef}}</div> + +<p><a href="/en-US/docs/Web/SVG">SVG </a>фильтр примитивна <strong><code><feBlend></code></strong> объединяет два объекта, управляемых определенным режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоев. Режим определяется атрибутом {{SVGAttr("mode")}}.</p> + +<h2 id="Используемый_контекст">Используемый контекст</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Filter_primitive_attributes">Filter primitive attributes</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> +</ul> + +<h3 id="Специальные_атрибуты">Специальные атрибуты</h3> + +<ul> + <li>{{SVGAttr("in")}}</li> + <li>{{SVGAttr("in2")}}</li> + <li>{{SVGAttr("mode")}}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Этот элемент реализует интерфейс {{domxref("SVGFEBlendElement")}}.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html; highlight[5-6]"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="spotlight"> + <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" + flood-color="green" flood-opacity="1"/> + <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/> + </filter> + </defs> + + <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" + x="10%" y="10%" width="80%" height="80%" + style="filter:url(#spotlight);"/> +</svg></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Example", 200, 200)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Filters 1.0", "#feBlendElement", "<feBlend>")}}</td> + <td>{{Spec2("Filters 1.0")}}</td> + <td>Аутсорсинг режимов наложения на{{SpecName("Compositing", "#ltblendmodegt")}}</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#feBlendElement", "<feBlend>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("svg.elements.feBlend")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li><a href="/en-US/docs/Web/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li> +</ul> diff --git a/files/ru/web/svg/элемент/foreignobject/index.html b/files/ru/web/svg/элемент/foreignobject/index.html new file mode 100644 index 0000000000..64e32d019f --- /dev/null +++ b/files/ru/web/svg/элемент/foreignobject/index.html @@ -0,0 +1,119 @@ +--- +title: <foreignObject> +slug: Web/SVG/Элемент/foreignObject +translation_of: Web/SVG/Element/foreignObject +--- +<div>{{SVGRef}}<br> +Элемент <strong><code><foreignObject></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет включать другое пространство имен XML.<br> +В контексте браузера это, скорее всего, XHTML / HTML.</div> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[16,27]"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <style> + polygon { fill: black } + + div { + color: white; + font:18px serif; + height: 100%; + overflow: auto; + } + </style> + + <polygon points="5,5 195,10 185,185 10,195" /> + + <!-- Типичный пример использования: встраивание HTML-текста в SVG --> + <foreignObject x="20" y="20" width="160" height="160"> + <!-- +В контексте SVG, внедренного в HTML, пространство имен XHTML может и следует избегать, +но это обязательно в контексте документа SVG + --> + <div xmlns="http://www.w3.org/1999/xhtml"> + <em>- Смолчал хозяин, да и то, что мог сказать + - Мне невдомёк, но во владениях чертога + Поможет дом срубить да судьбы вам связать. + Не веришь ежли - испроси у Бога...</em> + </div> + </foreignObject> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{SVGAttr("height")}}</dt> + <dd>Этот атрибут определяет высоту прямоугольника.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd>Этот атрибут определяет ширину прямоугольника.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>Этот атрибут определяет координату x контейнера svg.<br> + Это не влияет на внешние элементы SVG.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>Этот атрибут определяет координату Y контейнера SVG.<br> + Это не влияет на внешние элементы SVG.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Starting with SVG2 <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> are <em>Geometry Propertie</em>s, meaning those attributes can also be used as CSS properties for that element.</p> +</div> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Document event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Aria Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<p>{{svginfo}}</p> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + + + +<p>{{Compat("svg.elements.foreignObject")}}</p> diff --git a/files/ru/web/svg/элемент/g/index.html b/files/ru/web/svg/элемент/g/index.html new file mode 100644 index 0000000000..c425f3c5b8 --- /dev/null +++ b/files/ru/web/svg/элемент/g/index.html @@ -0,0 +1,98 @@ +--- +title: <g> +slug: Web/SVG/Элемент/g +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/g +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">Элемент g используется для группировки других SVG элементов.</span> Любые преобразования применяемые к g элементу наследуются его дочерними элементами. Также g используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью {{SVGElement("use")}}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html notranslate"><svg viewBox="0 0 95 50" + xmlns="http://www.w3.org/2000/svg"> + <g stroke="green" fill="white" stroke-width="5"> + <circle cx="25" cy="25" r="15"/> + <circle cx="40" cy="25" r="15"/> + <circle cx="55" cy="25" r="15"/> + <circle cx="70" cy="25" r="15"/> + </g> +</svg> +</pre> + +<p>{{EmbedLiveSample("Example",220,130)}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3> + +<p><em>Нет специфичных атрибутов.</em></p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p>Этот элемент реализует <code><a href="/en-US/docs/DOM/SVGGElement">SVGGElement</a></code> интерейс.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'struct.html#GElement', '<g>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#Groups', '<g>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.g")}}</p> + + + +<h2 id="Смотрите_также">Смотрите также:</h2> + + + +<ul> + <li>{{SVGElement("use")}}</li> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("symbol")}}</li> + <li><a href="http://tutorials.jenkov.com/svg/g-element.html">SVG элемент g</a></li> +</ul> diff --git a/files/ru/web/svg/элемент/image/index.html b/files/ru/web/svg/элемент/image/index.html new file mode 100644 index 0000000000..e417a4ac65 --- /dev/null +++ b/files/ru/web/svg/элемент/image/index.html @@ -0,0 +1,94 @@ +--- +title: <image> +slug: Web/SVG/Элемент/image +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/image +--- +<div>{{SVGRef}}</div> + +<p>Элемент <image> позволяет включить растровые изображения в SVG документ.</p> + +<h2 id="Usage_context">Usage context</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("width")}}</li> + <li>{{SVGAttr("height")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> + <li>{{SVGAttr("preserveAspectRatio")}}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>This element implements the <code><a href="/en-US/docs/Web/API/SVGImageElement">SVGImageElement</a></code> interface.</p> + +<h2 id="Пример">Пример</h2> + +<p>Базовый рендеринг PNG изображения в качестве объекта SVG:</p> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html notranslate"><svg width="200" height="200" + xmlns="http://www.w3.org/2000/svg"> + <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> +</svg> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Пример", 250, 260)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'embedded.html#ImageElement', '<image>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#ImageElement', '<image>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.image")}}</p> diff --git a/files/ru/web/svg/элемент/index.html b/files/ru/web/svg/элемент/index.html new file mode 100644 index 0000000000..b65942e344 --- /dev/null +++ b/files/ru/web/svg/элемент/index.html @@ -0,0 +1,253 @@ +--- +title: Справочник SVG элементов +slug: Web/SVG/Элемент +tags: + - SVG + - SVG Reference + - Руководство +translation_of: Web/SVG/Element +--- +<p>« <a href="/ru/docs/Web/SVG" title="SVG">SVG</a> / <a href="/ru/docs/Web/SVG/Attribute" title="SVG/Attribute">Справочник SVG атрибутов</a> »</p> + +<h2 id="SVG_элементы">SVG элементы</h2> + +<div class="index"><span id="A">A</span> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> + <li>{{SVGElement("altGlyphItem")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateColor")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> +</ul> +<span id="C">B C</span> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> + <li>{{SVGElement("cursor")}}</li> +</ul> +<span id="D">D</span> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + <li>{{SVGElement("discard")}}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feDistantLight")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("font")}}</li> + <li>{{SVGElement("font-face")}}</li> + <li>{{SVGElement("font-face-format")}}</li> + <li>{{SVGElement("font-face-name")}}</li> + <li>{{SVGElement("font-face-src")}}</li> + <li>{{SVGElement("font-face-uri")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> +<span id="G">G</span> + +<ul> + <li>{{SVGElement("g")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("glyphRef")}}</li> +</ul> +<span id="H">H</span> + +<ul> + <li>{{SVGElement("hatch")}}</li> + <li>{{SVGElement("hatchpath")}}</li> + <li>{{SVGElement("hkern")}}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{SVGElement("image")}}</li> +</ul> +<span id="L">J K L</span> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> +<span id="M">M</span> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("mesh")}}</li> + <li>{{SVGElement("meshgradient")}}</li> + <li>{{SVGElement("meshpatch")}}</li> + <li>{{SVGElement("meshrow")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("missing-glyph")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> +<span id="P">N O P</span> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> +<span id="R">Q R</span> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("solidcolor")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{SVGElement("unknown")}}</li> + <li>{{SVGElement("use")}}</li> +</ul> +<span id="V">V — Z</span> + +<ul> + <li>{{SVGElement("view")}}</li> + <li>{{SVGElement("vkern")}}</li> +</ul> +</div> + +<h2 id="Элементы_SVG_по_категориям">Элементы SVG по категориям</h2> + +<h3 id="Элементы_анимации">Элементы анимации</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> + +<h3 id="Базовые_фигуры">Базовые фигуры</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Контейнеры">Контейнеры</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> + +<h3 id="Элементы_описания">Элементы описания</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="Фильтры">Фильтры</h3> + +<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> + +<h3 id="Элементы_шрифта">Элементы шрифта</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> + +<h3 id="Градиентные_элементы">Градиентные элементы</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="Графические_элементы">Графические элементы</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}} </p> + +<h3 id="Элементы_ссылки_на_графику">Элементы ссылки на графику</h3> + +<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p> + +<h3 id="Источники_света">Источники света</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}} </p> + +<h3 id="Непрозрачные_элементы">Непрозрачные элементы</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}} </p> + +<h3 id="Элементы_сервера_печати">Элементы сервера печати</h3> + +<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}} </p> + +<h3 id="Отличительные_элементы">Отличительные элементы</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}} </p> + +<h3 id="Элементы_формы">Элементы формы</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Структурные_элементы">Структурные элементы</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="Элементы_текстового_контента">Элементы текстового контента</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Текстовые_контентные_дочерние_элементы">Текстовые контентные дочерние элементы</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Некатегоризированные_элементы">Некатегоризированные элементы</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}} </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute">Ссылка на атрибут SVG</a> </li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial">Учебник SVG</a> </li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model#SVG_interfaces">Ссылка на интерфейс SVG</a> </li> +</ul> + +<p> </p> + +<p> </p> diff --git a/files/ru/web/svg/элемент/line/index.html b/files/ru/web/svg/элемент/line/index.html new file mode 100644 index 0000000000..b7f75c6a96 --- /dev/null +++ b/files/ru/web/svg/элемент/line/index.html @@ -0,0 +1,104 @@ +--- +title: <line> +slug: Web/SVG/Элемент/line +tags: + - SVG +translation_of: Web/SVG/Element/line +--- +<div> {{SVGRef}}</div> + +<p>Элемент <strong><code><line></code></strong> одна из базовых фигур SVG, используемая для создания линии, связывающей две точки.</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> + + <!-- Если вы не укажете цвет контура, + линия не будет видна --> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{SVGAttr('x1')}}</dt> + <dd>Определяет координату начальной точки линии по оси x .<br> + <small><em>Тип значения:</em> <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr('x2')}}</dt> + <dd>Определяет координату конечной точки линии по оси x.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr('y1')}}</dt> + <dd>Определяет координату начальной точки линии по оси y.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr('y2')}}</dt> + <dd>Определяет координату конечной точки линии по оси y.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>Определяет общую длину пути в пользовательских единицах.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <em>none</em>; А<em>нимируемый</em>: <strong>да</strong></small></dd> +</dl> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt> + <dd><small>В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибуты оформления (стилей)</a> </dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Атрибуты условной обработки</a></dt> + <dd><small>В первую очередь: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Атрибуты события</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Глобальные атрибуты события</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Графические атрибуты события</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Атрибуты презентации</a></dt> + <dd><small>В превую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Атрибуты ARIA</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'shapes.html#LineElement', '<line>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#LineElement', '<line>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.line")}}</p> + +<p> </p> + +<h2 id="Смотрите_также">Смотрите также:</h2> + +<ul> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("path")}}</li> + <li><a href="https://www.svg-expert.ru/svg/line/">SVG Line - описание и примеры</a></li> +</ul> diff --git a/files/ru/web/svg/элемент/lineargradient/index.html b/files/ru/web/svg/элемент/lineargradient/index.html new file mode 100644 index 0000000000..37ab6a334d --- /dev/null +++ b/files/ru/web/svg/элемент/lineargradient/index.html @@ -0,0 +1,105 @@ +--- +title: <linearGradient> +slug: Web/SVG/Элемент/linearGradient +tags: + - NeedsUpdate + - SVG + - SVG градиент + - Справка + - Элемент +translation_of: Web/SVG/Element/linearGradient +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><linearGradient></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты презентации</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink_attributes">Атрибуты Xlink</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Специфические_атрибуты">Специфические атрибуты</h3> + +<ul> + <li>{{SVGAttr("gradientUnits")}}</li> + <li>{{SVGAttr("gradientTransform")}}</li> + <li>{{SVGAttr("x1")}}</li> + <li>{{SVGAttr("y1")}}</li> + <li>{{SVGAttr("x2")}}</li> + <li>{{SVGAttr("y2")}}</li> + <li>{{SVGAttr("spreadMethod")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_интерфейс">DOM интерфейс</h2> + +<p>Этот элемент реализует {{domxref("SVGLinearGradientElement")}} интерфейс.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="MyGradient"> + <stop offset="5%" stop-color="green"/> + <stop offset="95%" stop-color="gold"/> + </linearGradient> + </defs> + + <rect fill="url(#MyGradient)" + x="10" y="10" width="100" height="100"/> +</svg></pre> + +<p>{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}</p> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + +<div id="compat-desktop"> +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.linearGradient")}}</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("stop")}}</li> +</ul> diff --git a/files/ru/web/svg/элемент/path/index.html b/files/ru/web/svg/элемент/path/index.html new file mode 100644 index 0000000000..7dc97ca989 --- /dev/null +++ b/files/ru/web/svg/элемент/path/index.html @@ -0,0 +1,98 @@ +--- +title: <path> +slug: Web/SVG/Элемент/path +translation_of: Web/SVG/Element/path +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><path></code></strong> является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path.</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path d="M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z"/> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("d")}}</dt> + <dd>Этот атрибут определяет форму.<br> + <small><em>Тип значения</em>: <strong><string></strong> ; <em>Значеие по умолчанию</em>: <code>''</code>; <em>Анимирование</em>: <strong>Да</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>Этот атрибут позволяет указывать общую длину в пользовательских единицах.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значеие по умолчанию</em>:<em>нет</em>; <em>Анимирование</em>: <strong>Да</strong></small></dd> +</dl> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Атрибуты ядра</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибуты стиля</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Атрибуты условной обработки</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Атрибуты событий</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Атрибуты глобальных событий</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Использование">Использование</h2> + +<p>{{svginfo}}</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Характеристики</th> + <th scope="col">Статус</th> + <th scope="col">Коммент</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Paths", "#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG Paths")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "paths.html#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + +<p>div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, перейдите на https://github.com/mdn/browser-compat-data и отправьте pull request на изменение.</p> + +<p>{{Compat("svg.elements.path")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li> + <li><a href="/en-US/docs/Web/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li> +</ul> diff --git a/files/ru/web/svg/элемент/pattern/index.html b/files/ru/web/svg/элемент/pattern/index.html new file mode 100644 index 0000000000..2d572737d3 --- /dev/null +++ b/files/ru/web/svg/элемент/pattern/index.html @@ -0,0 +1,125 @@ +--- +title: <pattern> +slug: Web/SVG/Элемент/pattern +tags: + - SVG +translation_of: Web/SVG/Element/pattern +--- +<div>{{SVGRef}}<br> +Элемент <strong><code><pattern></code></strong> определяет графический объект, который может быть перерисован с повторяющимися координатами <strong>x</strong> и <strong>y</strong> («мозаичным»), чтобы покрыть область.</div> + +<div><br> +На ссылку <code><pattern></code> ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">графических элементах</a> , чтобы заполнить или обвести эти элементы указанным шаблоном. </div> + +<div> </div> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"> + <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> + </pattern> + </defs> + + <circle cx="50" cy="50" r="50" fill="url(#star)"/> + <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{SVGAttr("height")}}</dt> + <dd>Этот атрибут определяет высоту плитки шаблона.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("href")}}</dt> + <dd>Этот атрибут по умолчанию ссылается на пример шаблона для <code><pattern></code><br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("patternContentUnits")}}</dt> + <dd>Этот атрибут определяет систему координат содержимого {{ SVGElement("pattern") }}. <br> + <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>userSpaceOnUse</code>; <em>Animatable</em>: <strong>yes</strong></small> + <p class="note"><strong>Сноска:</strong> Этот атрибут не действует, если в элементе <code><pattern></code> указан атрибут <code>viewBox</code>.</p> + </dd> + <dt>{{SVGAttr("patternTransform")}}</dt> + <dd>Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("patternUnits")}}</dt> + <dd>Этот атрибут определяет систему координат для атрибутов <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code>. <br> + <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>objectBoundingBox</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("preserveAspectRatio")}}</dt> + <dd>Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.<br> + <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("viewBox")}}</dt> + <dd>Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd>Этот атрибут определяет ширину плитки шаблона.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>Этот атрибут определяет смещение координаты x мозаичного изображения.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> + <dd>Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов <code><pattern></code>.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small> + <p class="note"><strong>Сноска:</strong> Для браузеров, реализующих <code>href</code>, если заданы как <code>href</code>, так и <code>xlink:href</code>, <code>xlink:href</code> будет игнорироваться, используя только <code>href</code>.</p> + </dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>Этот атрибут определяет смещение координат y мозаичного элемента.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>XLink Attributes</dt> + <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd> +</dl> + +<h2 id="Нотации">Нотации</h2> + +<p>{{svginfo}}</p> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Характеристики</th> + <th scope="col">Статус</th> + <th scope="col">Коммент</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных.<br> +Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на их получение.</div> + +<p>{{Compat("svg.elements.pattern")}}</p> diff --git a/files/ru/web/svg/элемент/polygon/index.html b/files/ru/web/svg/элемент/polygon/index.html new file mode 100644 index 0000000000..b1baf626a3 --- /dev/null +++ b/files/ru/web/svg/элемент/polygon/index.html @@ -0,0 +1,95 @@ +--- +title: <polygon> +slug: Web/SVG/Элемент/polygon +tags: + - SVG +translation_of: Web/SVG/Element/polygon +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><polygon></code></strong> описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}.</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Example of a polygon with the default fill --> + <polygon points="0,100 50,25 50,75 100,0" /> + + <!-- Example of the same polygon shape with stroke and no fill --> + <polygon points="100,100 150,25 150,75 200,0" + fill="none" stroke="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{SVGAttr('points')}}</dt> + <dd>Данный атрибут определяет список точек (независимых пар x,y координат), необходимых для отрисовки фигуры.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>+ ; <em>Значение по умолчанию</em>: <code>""</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>Данный атрибут позволяет указывать общую длину пути в пользовательских единицах.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <em>none</em>; <em>Анимируемый</em>: <strong>да</strong></small></dd> +</dl> + +<h3 id="Global_attributes">Global attributes</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt> + <dd><small>Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибуты стилизации</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Условные атрибуты</a></dt> + <dd><small>Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Атрибуты событий</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Атрибуты глобальных событий</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'shapes.html#PolygonElement', '<polygon>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("svg.elements.polygon")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие базовые фигуры SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, <strong>{{ SVGElement('polyline') }}</strong>, <strong>{{ SVGElement('rect') }}</strong></li> +</ul> diff --git a/files/ru/web/svg/элемент/radialgradient/index.html b/files/ru/web/svg/элемент/radialgradient/index.html new file mode 100644 index 0000000000..04906d4fd5 --- /dev/null +++ b/files/ru/web/svg/элемент/radialgradient/index.html @@ -0,0 +1,108 @@ +--- +title: <radialGradient> +slug: Web/SVG/Элемент/radialGradient +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/radialGradient +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><radialGradient></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет авторам определять радиальные градиенты для заполнения или изменения графических элементов.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты презентации</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#XLink_attributes">Атрибуты Xlink</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Специфические_атрибуты">Специфические атрибуты</h3> + +<ul> + <li>{{SVGAttr("gradientUnits")}}</li> + <li>{{SVGAttr("gradientTransform")}}</li> + <li>{{SVGAttr("cx")}}</li> + <li>{{SVGAttr("cy")}}</li> + <li>{{SVGAttr("r")}}</li> + <li>{{SVGAttr("fx")}}</li> + <li>{{SVGAttr("fy")}}</li> + <li>{{SVGAttr("fr")}}</li> + <li>{{SVGAttr("spreadMethod")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_интерфейс">DOM интерфейс</h2> + +<p>Этот элемент реализует {{domxref("SVGRadialGradientElement")}} интерфейс.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <radialGradient id="exampleGradient"> + <stop offset="10%" stop-color="gold"/> + <stop offset="95%" stop-color="green"/> + </radialGradient> + </defs> + + <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/> +</svg></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Example", 120, 120)}}</p> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коммент</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>Добавлен атрибут <code>fr</code></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("svg.elements.radialGradient")}}</p> +</div> + +<p> </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{SVGElement("linearGradient")}}</li> +</ul> diff --git a/files/ru/web/svg/элемент/rect/index.html b/files/ru/web/svg/элемент/rect/index.html new file mode 100644 index 0000000000..8e4b7c9af7 --- /dev/null +++ b/files/ru/web/svg/элемент/rect/index.html @@ -0,0 +1,115 @@ +--- +title: <rect> +slug: Web/SVG/Элемент/rect +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/rect +--- +<div>{{SVGRef}}</div> + +<p><code><rect></code> - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скругленными углами.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Простая фигура, Графический элемент</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Любое количество указанных элементов в любом порядке:<br> + <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Элементы анимации</a> »<br> + <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Элементы описания</a> »</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElement" title="http://www.w3.org/TR/SVG/shapes.html#RectElement">SVG 1.1 (2ое издание)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<h3 id="Простой_пример_использования_rect">Простой пример использования rect</h3> + +<p> </p> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> + +<p> </p> + +<p>» <a href="https://mdn.mozillademos.org/files/8893/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> + +<h3 id="<rect>_со_скругленными_углами"><code><rect></code> со скругленными углами</h3> + +<p> </p> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" + width="100" height="100" + rx="15" ry="15"/> + +</svg></pre> + +<p>» <a href="https://mdn.mozillademos.org/files/8897/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Атрибуты условной обработки</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Атрибуты ядра</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Атрибуты графических собы</a>тий »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Атрибуты представления</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Специальные_атрибуты">Специальные атрибуты</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h2 id="DOM_Интерфейс">DOM Интерфейс</h2> + +<p>Данный элемент реализует интерфейс <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> .</p> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.rect")}}</p> + +<p> </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ SVGElement("path") }}</li> +</ul> diff --git a/files/ru/web/svg/элемент/svg/index.html b/files/ru/web/svg/элемент/svg/index.html new file mode 100644 index 0000000000..12e37bee9d --- /dev/null +++ b/files/ru/web/svg/элемент/svg/index.html @@ -0,0 +1,119 @@ +--- +title: <svg> +slug: Web/SVG/Элемент/svg +translation_of: Web/SVG/Element/svg +--- +<div>{{SVGRef}}</div> + +<p>Элемент <code>svg</code> является контейнером, который определяет новую систему координат и <a href="/en-US/docs/Web/SVG/Attribute/viewBox">область просмотра</a>. Он используется, как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML.</p> + +<div class="note"> +<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Атрибут <code>xmlns</code> требуется только для самого внешнего элемента <code>svg</code> документов SVG.</span> <span title="">Это не нужно для внутренних элементов <code>svg</code> или внутри документов HTML.</span></span></p> +</div> + +<div id="Exeemple"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4] notranslate"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> + <circle cx="50" cy="50" r="40" /> + <circle cx="150" cy="50" r="4" /> + + <svg viewBox="0 0 10 10" x="200" width="100"> + <circle cx="5" cy="5" r="4" /> + </svg> +</svg></pre> + +<p>{{EmbedLiveSample('Exeemple', 150, '100%')}}</p> +</div> + +<h2 id="Атрибуты"><span class="tlid-translation translation" lang="ru"><span title="">Атрибуты</span></span></h2> + +<dl> + <dt>{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}</dt> + <dd>The minimum SVG language profile that the document requires.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Язык сценариев по умолчанию, используемый фрагментом SVG.</span></span><br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <code>application/ecmascript</code>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Язык таблицы стилей по умолчанию, используемый фрагментом SVG.</span></span><br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <code>text/css</code>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("height")}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span class="alt-edited" title="">Отображаемая высота прямоугольной области просмотра.</span> <span title="">(Не высота его системы координат.)</span></span><br> + <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("preserveAspectRatio")}}</dt> + <dd>How the <code>svg</code> fragment must be deformed if it is displayed with a different aspect ratio.<br> + <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("version")}} {{deprecated_inline('svg2')}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Какая версия SVG используется для внутреннего содержимого элемента.</span></span><br> + <small><em>Value type</em>: <strong><a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("viewBox")}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Координаты области просмотра SVG для текущего фрагмента SVG.</span></span><br> + <small><em>Value type</em>: <strong><a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span class="alt-edited" title="">Отображаемая ширина прямоугольной области просмотра.</span> <span title="">(Не </span><span class="alt-edited" title="">ширина </span><span title="">его системы координат.)</span></span><br> + <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>The displayed x coordinate of the svg container. No effect on outermost <code>svg</code> elements.<br> + <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>The displayed y coordinate of the svg container. No effect on outermost <code>svg</code> elements.<br> + <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Начиная с SVG2, <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code> являются Geometry Properties, то есть эти атрибуты также можно использовать в качестве CSS-свойств.</span></span></p> +</div> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="/en-US/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Document event attributes</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a></small></dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Aria атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Примечания_по_использованию"><span class="tlid-translation translation" lang="ru"><span title="">Примечания по использованию</span></span></h2> + +<p>{{svginfo}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Кросс-браузерность"><span class="module__title__link">Кросс-браузерность</span></h2> + + + +<p>{{Compat("svg.elements.svg")}}</p> diff --git a/files/ru/web/svg/элемент/text/index.html b/files/ru/web/svg/элемент/text/index.html new file mode 100644 index 0000000000..d63d1b47dd --- /dev/null +++ b/files/ru/web/svg/элемент/text/index.html @@ -0,0 +1,211 @@ +--- +title: <text> +slug: Web/SVG/Элемент/<text> +tags: + - NeedsUpdate + - SVG + - SVG text +translation_of: Web/SVG/Element/text +--- +<div>{{SVGRef}}</div> + +<p>SVG элемент <strong><code><text></code></strong> определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу <code><text></code> можно применить градиент, шаблон, окантовку, маску или фильтр.</p> + +<p>Текст не будет отображаться, если он не находится внутри SVG элемента <code><text></code>. Это отличается от сокрытия по умолчанию, поскольку установка <a href="/en-US/docs/Web/SVG/Attribute/display">свойства display</a> не отображает текст.</p> + +<h2 id="Пример">Пример</h2> + +<div id="Пример1"> +<div class="hidden"> +<pre class="brush: css"> html,body,svg { height:100% } + </pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"> + <style> + .small { font: italic 13px sans-serif; } + .heavy { font: bold 30px sans-serif; } + + /* Обратите внимание, что цвет текста задается с помощью * + * fill свойства, а свойство color используется только для HTML */ + .Rrrrr { font: italic 40px serif; fill: red; } + </style> + + <text x="20" y="35" class="small">Мой</text> + <text x="60" y="35" class="heavy">кот</text> + <text x="60" y="55" class="small">очень</text> + <text x="100" y="55" class="Rrrrr">Сердит!</text> +</svg> +</pre> +</div> + +<p>{{EmbedLiveSample('Пример', 150, '100%')}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Условные атрибуты обработки</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Графические атрибуты событий</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты представления</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("transform")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Специфические_атрибуты">Специфические атрибуты</h3> + +<ul> + <li>{{SVGAttr("х")}}</li> + <li>{{SVGAttr("у")}}</li> + <li>{{SVGAttr("dх")}}</li> + <li>{{SVGAttr("dy")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("textLength")}}</li> + <li>{{SVGAttr("text-anchor")}}</li> + <li>{{SVGAttr("lengthAdjust")}}</li> +</ul> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p>Этот элемент реализует интерфейс {{domxref("SVGTextElement")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Основы_использования_элемента_<text>">Основы использования элемента <text></h3> + +<h4 id="SVG">SVG</h4> + +<div id="Примеры2"> +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"> + <style> + .mal { font: italic 16px sans-serif; } + .hey { font: bold 26px sans-serif; fill: #6de;} + </style> + <text x="0" y="68" class="mal">- Привет,</text> + <text x="110" y="40" class="hey">Сахалин!</text> +</svg> +</pre> +</div> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('SVG', 150, '100%')}}</p> + +<h3 id="Изменение_направления_написания_текста.">Изменение направления написания текста.</h3> + +<p>Направление написания SVG-текста можно сменить на обратное, применив трансформацию.</p> + +<h4 id="SVG_2">SVG</h4> + +<div id="Реверс"> +<pre class="brush: html"> + +<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> + <style> + .mal {font: italic 16px sans-serif; transform: rotate(180, 50, 50);} + .hey {font: bold 26px sans-serif; fill: #6de;} + </style> + <text x="-40" y="68" class="mal" transform="rotate(180, 50, 50)"> + Пример ротации</text> + <text x="180" y="40" class="hey">SVG-текста.</text> +</svg> + + +</pre> +</div> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample('Реверс', 200, '100%')}}</p> + +<h3 id="Цвет_текста">Цвет текста</h3> + +<p>Цвет текста в SVG-элементе <text> может быть изменён посредством свойства <strong>fill</strong>="[color]" внутри элемента <text>.</p> + +<h4 id="SVG_3">SVG</h4> + +<div id="Цвет"> +<pre class="brush: html"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <style> + .gri {font: italic 16px sans-serif; fill: #6dd;} + .red {font: bold 26px sans-serif; fill: #d66;} + </style> + <text class="gri" x="10" y="30">Цвет текста</text> + <text class="red" x="120" y="30">SVG.</text> +</svg> +</pre> +</div> + +<h4 id="Результат_3">Результат</h4> + +<p>{{EmbedLiveSample('SVG_3', 200, '100%')}}</p> + +<h3 id="Применение_CSS-стилей_к_содержимому_элемента_<text>.">Применение CSS-стилей к содержимому элемента <text>.</h3> + +<p>Содержимое SVG элемента <strong><text></strong> может быть стилизовано как обычный текст в HTML.</p> + +<h4 id="SVG_4">SVG</h4> + +<div id="Стиляга"> +<pre class="brush: html"> <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <style> + .stil {font: italic 16px sans-serif;} + .list {font: bold 26px sans-serif;} + </style> + <text class="stil" x="10" y="30">Стиль текста</text> + <text class="list" x="140" y="30">SVG.</text> +</svg> +</pre> +</div> + +<h4 id="Результат_4">Результат</h4> + +<p>{{EmbedLiveSample('SVG_4', 200, '100%')}}</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коммент</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'text.html#TextElement', '<text>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<p>Таблица составлена по информации из <a href="/en-US/docs/Web/SVG/Compatibility_sources">этого источника</a>.</p> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> + +<p>{{Compat("svg.elements.text")}}</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{Svginfo}}</p> + +<h2 id="Связь">Связь</h2> + +<ul> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> + <li>{{SVGElement("altGlyph")}}</li> +</ul> diff --git a/files/ru/web/svg/элемент/use/index.html b/files/ru/web/svg/элемент/use/index.html new file mode 100644 index 0000000000..12d7007932 --- /dev/null +++ b/files/ru/web/svg/элемент/use/index.html @@ -0,0 +1,126 @@ +--- +title: <use> +slug: Web/SVG/Элемент/use +tags: + - SVG + - SVG Графика + - Ссылка + - Элемент +translation_of: Web/SVG/Element/use +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><use></code></strong> берёт элементы из SVG-документа и дублирует их где-то еще.</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> + <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/> + <use href="#myCircle" x="10" fill="blue"/> + <use href="#myCircle" x="20" fill="white" stroke="red"/> + <!-- + В данном случае атрибут stroke="red" будет игнорироваться, так как + ранее он был задан непосредственно для фигуры круга с id "myCircle". + Большинство атрибутов (кроме x, y, width, height и (xlink:)href) не + переопределяют значения, заданные у предка. + Вот почему круги имеют разные координаты "x", но одинаковое значение "stroke". + --> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> +</div> + +<p>Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент <code>use</code>, подобно элементам <code><template></code> в HTML 5.<br> + <br> + Большинство атрибутов <code>use</code> <strong>не</strong> переопределяют те, что уже заданы у элемента, на который <code>use</code> ссылается. (Это отличается от того, как атрибуты CSS-стилей, переопределяют те, что были заданы раньше в каскаде). <strong>Только</strong> атрибуты {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}} и {{SVGAttr("href")}} элемента <code>use</code> будут переопределять те, что были заданы у элемента, на который <code>use</code> ссылается. Однако к элементу <code>use</code> будут применены любые другие атрибуты, не заданные у элемента, на который <code>use</code> ссылается.<br> + <br> + Поскольку клонированные элементы не отображаются, нужно соблюдать осторожность при использовании <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> для стилизации элемента <code>use</code> и его клонированных потомков. Нет гарантии, что CSS-свойства будут унаследованы клонированным DOM, пока вы явно не зададите им использование <a href="/en-US/docs/Web/CSS/inheritance">CSS-наследования</a>.<br> + <br> + По соображениям безопасности, браузеры могут применять <a href="/en-US/docs/Web/Security/Same-origin_policy">правило ограничения домена</a> для элементов <code>use</code> и могут отказаться загружать URL другого источника в атрибуте {{SVGAttr("href")}}.</p> + +<div class="warning"> +<p>Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее, на практике всё еще может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите <a href="#browser-compatibility">таблицу совместимости</a> ниже).</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("href")}}</dt> + <dd>Ссылка на элемент/фрагмент, который нужно продублировать.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a> ; <em>Значение по умолчанию</em>: <code>none</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("xlink:href")}}</dt> + <dd>{{Deprecated_Header("SVG2")}}<a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI"><IRI></a>-ссылка на элемент/фрагмент, который нужно продублировать.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#IRI"><strong><IRI></strong></a> ; <em>Значение по умолчанию</em>: <code>none</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>Координата "x" элемента <code>use</code>.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt id="attr-cy">{{SVGAttr("y")}}</dt> + <dd>Координата "y" элемента <code>use</code>.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt id="attr-r">{{SVGAttr("width")}}</dt> + <dd>Ширина элемента <code>use</code>.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("height")}}</dt> + <dd>Высота элемента <code>use</code>.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Начиная с SVG2, <code>x</code>, <code>y</code>, <code>width</code>, и <code>height</code> являются <em>Свойствами Геометрии</em>, то есть эти атрибуты также могут быть использованы в качестве CSS-свойств для этого элемента.</p> +</div> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Атрибуты Событий</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA Атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> + <dt>XLink Атрибуты</dt> + <dd><small>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}</small></dd> +</dl> + +<h2 id="Примечание_по_использованию">Примечание по использованию</h2> + +<p>{{svginfo}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'struct.html#UseElement', '<use>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость"><a id="browser-compatibility" name="browser-compatibility">Браузерная совместимость</a></h2> + + + +<p>{{Compat("svg.elements.use")}}</p> |