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/attribute/r | |
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/attribute/r')
-rw-r--r-- | files/ru/web/svg/attribute/r/index.html | 129 |
1 files changed, 129 insertions, 0 deletions
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> |