diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
commit | c058fa0fb22dc40ef0225b21a97578cddd0aaffa (patch) | |
tree | df20f8b4c724b61cb9c34cdb450a7ac77d690bd0 /files/ru/web/svg | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.gz translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.bz2 translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.zip |
unslug ru: move
Diffstat (limited to 'files/ru/web/svg')
-rw-r--r-- | files/ru/web/svg/attribute/onload/index.html | 5 | ||||
-rw-r--r-- | files/ru/web/svg/element/a/index.html (renamed from files/ru/web/svg/элемент/a/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/animate/index.html (renamed from files/ru/web/svg/элемент/animate/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/animatemotion/index.html (renamed from files/ru/web/svg/элемент/animatemotion/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/circle/index.html (renamed from files/ru/web/svg/элемент/circle/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/defs/index.html (renamed from files/ru/web/svg/элемент/defs/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/ellipse/index.html (renamed from files/ru/web/svg/элемент/ellipse/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/feblend/index.html (renamed from files/ru/web/svg/элемент/feblend/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/foreignobject/index.html (renamed from files/ru/web/svg/элемент/foreignobject/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/g/index.html (renamed from files/ru/web/svg/элемент/g/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/image/index.html (renamed from files/ru/web/svg/элемент/image/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/index.html (renamed from files/ru/web/svg/элемент/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/line/index.html (renamed from files/ru/web/svg/элемент/line/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/lineargradient/index.html (renamed from files/ru/web/svg/элемент/lineargradient/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/path/index.html (renamed from files/ru/web/svg/элемент/path/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/pattern/index.html (renamed from files/ru/web/svg/элемент/pattern/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/polygon/index.html (renamed from files/ru/web/svg/элемент/polygon/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/radialgradient/index.html (renamed from files/ru/web/svg/элемент/radialgradient/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/rect/index.html (renamed from files/ru/web/svg/элемент/rect/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/svg/index.html (renamed from files/ru/web/svg/элемент/svg/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/text/index.html (renamed from files/ru/web/svg/элемент/text/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/element/use/index.html (renamed from files/ru/web/svg/элемент/use/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/basic_shapes/index.html (renamed from files/ru/web/svg/tutorial/основные_фигуры/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/basic_transformations/index.html (renamed from files/ru/web/svg/tutorial/базовые_преобразования/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/introduction/index.html (renamed from files/ru/web/svg/tutorial/введение/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/positions/index.html (renamed from files/ru/web/svg/tutorial/позиции/index.html) | 0 | ||||
-rw-r--r-- | files/ru/web/svg/tutorial/svg_and_css/index.html | 213 |
27 files changed, 213 insertions, 5 deletions
diff --git a/files/ru/web/svg/attribute/onload/index.html b/files/ru/web/svg/attribute/onload/index.html deleted file mode 100644 index b6a5d49ea2..0000000000 --- a/files/ru/web/svg/attribute/onload/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: onload -slug: Web/SVG/Attribute/onload ---- -<p>Link not exist</p> diff --git a/files/ru/web/svg/элемент/a/index.html b/files/ru/web/svg/element/a/index.html index 97c2daf793..97c2daf793 100644 --- a/files/ru/web/svg/элемент/a/index.html +++ b/files/ru/web/svg/element/a/index.html diff --git a/files/ru/web/svg/элемент/animate/index.html b/files/ru/web/svg/element/animate/index.html index 90988b58f8..90988b58f8 100644 --- a/files/ru/web/svg/элемент/animate/index.html +++ b/files/ru/web/svg/element/animate/index.html diff --git a/files/ru/web/svg/элемент/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html index 3b1259dcb3..3b1259dcb3 100644 --- a/files/ru/web/svg/элемент/animatemotion/index.html +++ b/files/ru/web/svg/element/animatemotion/index.html diff --git a/files/ru/web/svg/элемент/circle/index.html b/files/ru/web/svg/element/circle/index.html index 3f1907b3bf..3f1907b3bf 100644 --- a/files/ru/web/svg/элемент/circle/index.html +++ b/files/ru/web/svg/element/circle/index.html diff --git a/files/ru/web/svg/элемент/defs/index.html b/files/ru/web/svg/element/defs/index.html index 0312b05e34..0312b05e34 100644 --- a/files/ru/web/svg/элемент/defs/index.html +++ b/files/ru/web/svg/element/defs/index.html diff --git a/files/ru/web/svg/элемент/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.html index f04083c1e1..f04083c1e1 100644 --- a/files/ru/web/svg/элемент/ellipse/index.html +++ b/files/ru/web/svg/element/ellipse/index.html diff --git a/files/ru/web/svg/элемент/feblend/index.html b/files/ru/web/svg/element/feblend/index.html index acd3547dcd..acd3547dcd 100644 --- a/files/ru/web/svg/элемент/feblend/index.html +++ b/files/ru/web/svg/element/feblend/index.html diff --git a/files/ru/web/svg/элемент/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.html index 64e32d019f..64e32d019f 100644 --- a/files/ru/web/svg/элемент/foreignobject/index.html +++ b/files/ru/web/svg/element/foreignobject/index.html diff --git a/files/ru/web/svg/элемент/g/index.html b/files/ru/web/svg/element/g/index.html index c425f3c5b8..c425f3c5b8 100644 --- a/files/ru/web/svg/элемент/g/index.html +++ b/files/ru/web/svg/element/g/index.html diff --git a/files/ru/web/svg/элемент/image/index.html b/files/ru/web/svg/element/image/index.html index e417a4ac65..e417a4ac65 100644 --- a/files/ru/web/svg/элемент/image/index.html +++ b/files/ru/web/svg/element/image/index.html diff --git a/files/ru/web/svg/элемент/index.html b/files/ru/web/svg/element/index.html index b65942e344..b65942e344 100644 --- a/files/ru/web/svg/элемент/index.html +++ b/files/ru/web/svg/element/index.html diff --git a/files/ru/web/svg/элемент/line/index.html b/files/ru/web/svg/element/line/index.html index b7f75c6a96..b7f75c6a96 100644 --- a/files/ru/web/svg/элемент/line/index.html +++ b/files/ru/web/svg/element/line/index.html diff --git a/files/ru/web/svg/элемент/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.html index 37ab6a334d..37ab6a334d 100644 --- a/files/ru/web/svg/элемент/lineargradient/index.html +++ b/files/ru/web/svg/element/lineargradient/index.html diff --git a/files/ru/web/svg/элемент/path/index.html b/files/ru/web/svg/element/path/index.html index 7dc97ca989..7dc97ca989 100644 --- a/files/ru/web/svg/элемент/path/index.html +++ b/files/ru/web/svg/element/path/index.html diff --git a/files/ru/web/svg/элемент/pattern/index.html b/files/ru/web/svg/element/pattern/index.html index 2d572737d3..2d572737d3 100644 --- a/files/ru/web/svg/элемент/pattern/index.html +++ b/files/ru/web/svg/element/pattern/index.html diff --git a/files/ru/web/svg/элемент/polygon/index.html b/files/ru/web/svg/element/polygon/index.html index b1baf626a3..b1baf626a3 100644 --- a/files/ru/web/svg/элемент/polygon/index.html +++ b/files/ru/web/svg/element/polygon/index.html diff --git a/files/ru/web/svg/элемент/radialgradient/index.html b/files/ru/web/svg/element/radialgradient/index.html index 04906d4fd5..04906d4fd5 100644 --- a/files/ru/web/svg/элемент/radialgradient/index.html +++ b/files/ru/web/svg/element/radialgradient/index.html diff --git a/files/ru/web/svg/элемент/rect/index.html b/files/ru/web/svg/element/rect/index.html index 8e4b7c9af7..8e4b7c9af7 100644 --- a/files/ru/web/svg/элемент/rect/index.html +++ b/files/ru/web/svg/element/rect/index.html diff --git a/files/ru/web/svg/элемент/svg/index.html b/files/ru/web/svg/element/svg/index.html index 12e37bee9d..12e37bee9d 100644 --- a/files/ru/web/svg/элемент/svg/index.html +++ b/files/ru/web/svg/element/svg/index.html diff --git a/files/ru/web/svg/элемент/text/index.html b/files/ru/web/svg/element/text/index.html index d63d1b47dd..d63d1b47dd 100644 --- a/files/ru/web/svg/элемент/text/index.html +++ b/files/ru/web/svg/element/text/index.html diff --git a/files/ru/web/svg/элемент/use/index.html b/files/ru/web/svg/element/use/index.html index 12d7007932..12d7007932 100644 --- a/files/ru/web/svg/элемент/use/index.html +++ b/files/ru/web/svg/element/use/index.html diff --git a/files/ru/web/svg/tutorial/основные_фигуры/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.html index e95fd31f68..e95fd31f68 100644 --- a/files/ru/web/svg/tutorial/основные_фигуры/index.html +++ b/files/ru/web/svg/tutorial/basic_shapes/index.html diff --git a/files/ru/web/svg/tutorial/базовые_преобразования/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html index 6aa2b20b16..6aa2b20b16 100644 --- a/files/ru/web/svg/tutorial/базовые_преобразования/index.html +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html diff --git a/files/ru/web/svg/tutorial/введение/index.html b/files/ru/web/svg/tutorial/introduction/index.html index 0ecb1c5f1c..0ecb1c5f1c 100644 --- a/files/ru/web/svg/tutorial/введение/index.html +++ b/files/ru/web/svg/tutorial/introduction/index.html diff --git a/files/ru/web/svg/tutorial/позиции/index.html b/files/ru/web/svg/tutorial/positions/index.html index 7a660c2d0f..7a660c2d0f 100644 --- a/files/ru/web/svg/tutorial/позиции/index.html +++ b/files/ru/web/svg/tutorial/positions/index.html diff --git a/files/ru/web/svg/tutorial/svg_and_css/index.html b/files/ru/web/svg/tutorial/svg_and_css/index.html new file mode 100644 index 0000000000..a69c4281af --- /dev/null +++ b/files/ru/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,213 @@ +--- +title: SVG и CSS +slug: Web/Guide/CSS/Getting_started/SVG_и_CSS +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +<div>{{CSSTutorialTOC}}</div> + +<p>На этой странице показано, как использовать CSS со специальным языком для создания графики: <a href="/en-US/docs/SVG">SVG</a>.</p> + +<p>Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.</p> + +<p>Это вторая секция Части II <a href="/en-US/docs/Web/Guide/CSS/Getting_started">Руководство по CSS</a>.<br> + Предыдущая секция: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br> + Следующая секция: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p> + +<h3 id="Information_SVG" name="Information:_SVG">Общая информация: SVG</h3> + +<p><em>SVG</em> (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.</p> + +<p>SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.</p> + +<p>Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.</p> + +<p>Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> + <caption>Немного подробностей</caption> + <tbody> + <tr> + <td> + <p>На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a>, либо в таблицах совместимости <a href="/en-US/docs/SVG/Element">SVG element reference</a>, для информации о поддержке отдельных элементов.</p> + + <p>В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p> + + <p>Более подробная информация о SVG в Mozilla, представлена на станице <a href="/en-US/docs/SVG">SVG</a> в этой wiki.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Action_An_SVG_demonstration" name="Action:_An_SVG_demonstration">За дело: Демонстрация SVG</h3> + +<p>Создайте новый документ SVG, как обычный текстовый файл, <code>doc8.svg</code>. Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style8.css"?> + +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>SVG demonstration</title> +<desc>Mozilla CSS Getting Started - SVG demonstration</desc> + +<defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + +<text id="heading" x="-280" y="-270"> + SVG demonstration</text> +<text id="caption" x="-280" y="-250"> + Move your mouse pointer over the flower.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" + stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +</pre> + +<p>Создайте новый файл CSS, <code>style8.css</code>. копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p> + +<pre class="brush: css">/*** SVG demonstration ***/ + +/* page */ +svg { + background-color: beige; + } + +#heading { + font-size: 24px; + font-weight: bold; + } + +#caption { + font-size: 12px; + } + +/* flower */ +#flower:hover { + cursor: crosshair; + } + +/* gradient */ +#fade-stop-1 { + stop-color: blue; + } + +#fade-stop-2 { + stop-color: white; + } + +/* outer petals */ +#outer-petals { + opacity: .75; + } + +#outer-petals .segment-fill { + fill: azure; + stroke: lightsteelblue; + stroke-width: 1; + } + +#outer-petals .segment-edge { + fill: none; + stroke: deepskyblue; + stroke-width: 3; + } + +#outer-petals .segment:hover > .segment-fill { + fill: plum; + stroke: none; + } + +#outer-petals .segment:hover > .segment-edge { + stroke: slateblue; + } + +/* inner petals */ +#inner-petals .segment-fill { + fill: yellow; + stroke: yellowgreen; + stroke-width: 1; + } + +#inner-petals .segment-edge { + fill: none; + stroke: yellowgreen; + stroke-width: 9; + } + +#inner-petals .segment:hover > .segment-fill { + fill: darkseagreen; + stroke: none; + } + +#inner-petals .segment:hover > .segment-edge { + stroke: green; + } +</pre> + +<p>Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.</p> + +<p>Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:</p> + +<table style="border: 2px outset #3366bb;"> + <tbody> + <tr> + <td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td> + </tr> + </tbody> +</table> + +<p>Примечания к демонстрации:</p> + +<ul> + <li>Документ SVG привязывается к таблице стилей общепринятым способом.</li> + <li>SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.</li> +</ul> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption>Задание</caption> + <tbody> + <tr> + <td>Измение таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.</td> + </tr> + </tbody> +</table> + +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS">Посмотреть решение к этому заданию.</a></p> + +<h4 id="What_next.3F" name="What_next.3F">Что дальше?</h4> + +<p>В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p> |