diff options
Diffstat (limited to 'files/ru/web/svg/tutorial/fills_and_strokes/index.html')
| -rw-r--r-- | files/ru/web/svg/tutorial/fills_and_strokes/index.html | 145 |
1 files changed, 145 insertions, 0 deletions
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> |