From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/svg/attribute/r/index.html | 124 ++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 files/ja/web/svg/attribute/r/index.html (limited to 'files/ja/web/svg/attribute/r') diff --git a/files/ja/web/svg/attribute/r/index.html b/files/ja/web/svg/attribute/r/index.html new file mode 100644 index 0000000000..93c9b8198f --- /dev/null +++ b/files/ja/web/svg/attribute/r/index.html @@ -0,0 +1,124 @@ +--- +title: r +slug: Web/SVG/Attribute/r +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/r +--- +
{{SVGRef}}
+ +

r 属性は円の半径を定義します。

+ +

二つの要素、すなわち、{{SVGElement("circle")}} と {{SVGElement("radialGradient")}} が、この属性を使っています。

+ +
+ + +
<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>
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

circle

+ +

{{SVGElement('circle')}} に関しては、r は、円の半径を定めており、したがって、その円の大きさを定めています。ゼロ以下の値を用いると、その円はまったく描画されません。

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
デフォルト値0
アニメーション可能かYes
+ +

注: SVG2 からは、r は 幾何属性 (Geometry Property) です。これが意味することは、r 属性を circle の CSS 属性としても使える、ということです。

+ +

radialGradient

+ +

{{ SVGElement("radialGradient") }} に関しては、r は、放射状グラデーションの末端の円の半径を定めています。

+ +

グラデーションの 100% にあたるピン留め箇所 (stop) が、この末端の円の外周にマッピングされるように、グラデーションが描画されます。ゼロ以下の値を用いると、グラデーションの最後の {{ SVGElement("stop") }} の色と不透明度を使った単一の色で、当該領域を塗りつぶすことになります。

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
デフォルト値50%
アニメーション可能かYes
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態備考
{{SpecName("SVG2", "geometry.html#R", "r")}}{{Spec2("SVG2")}}Definition as a geometry property
{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}}{{Spec2("SVG2")}}Definition for SVG2 paint servers <radialGradient>
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}}{{Spec2("SVG1.1")}}Initial definition for <radialGradient>
{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}}{{Spec2("SVG1.1")}}Initial definition for <circle>
-- cgit v1.2.3-54-g00ecf