r

円の半径を定義する <length> と <percentage> の値です。

<length>

絶対的または相対的な長さで、 CSS の <length> データ型で許可されている任意の単位で表現することができます。負の値は無効です。

<percentage>

現在の SVG ビューポートの、 $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$ で計算される正規化された対角線を参照するパーセント値です。

r = 
 <length-percentage> 

<length-percentage> = 
 <length> |
 <percentage> 

この例では、 SVG 内に 2 つの同一の <circle> 要素が存在し、それぞれ半径が 10 で、中心点の X 軸座標と Y 軸座標が同じです。

<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="10" /> <circle cx="50" cy="50" r="10" /> </svg> 

CSS を使用して、最初の円のみスタイルを設定し、 2 番目の円には既定のスタイルを使用します（fill の既定値は黒）。 r プロパティを使用して SVG の r 属性の値を上書きし、 fill と stroke を指定します。 SVG の既定のサイズは、幅が 300px、高さが 150pxです。

svg { border: 1px solid black; } circle:first-of-type { r: 30px; fill: lightgreen; stroke: black; } 

この例では、 2 つの SVG が含まれており、それぞれに 2 つの <circle> 要素があります。 2 つ目の SVG には viewBox 属性が記載されており、SVG の viewBox と SVG のビューポートの違いを示しています。

<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="10" /> <circle cx="50" cy="50" r="10" /> </svg> <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="10" /> <circle cx="50" cy="50" r="10" /> </svg> 

CSS は前回の例と似ており、 r: 30px が設定されていますが、画像がどちらも確実に 300px になるように、 width を設定します。

svg { border: 1px solid black; width: 300px; } circle:first-of-type { r: 30px; fill: lightgreen; stroke: black; } 

viewBox 属性は SVG を SVG 座標系で 200 ピクセルの幅として定義し、画像は 300px まで拡大されるため、SVG 座標で 30 ピクセルである部分は、CSS ピクセルでは 45 ピクセルとしてレンダリングされるように変倍されます。

この例では、前回の例と同じマークアップを使用します。唯一の違いは r の値であり、この場合はパーセント値を使用します。

<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="10" /> <circle cx="50" cy="50" r="10" /> </svg> <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="10" /> <circle cx="50" cy="50" r="10" /> </svg> 

svg { border: 1px solid black; width: 300px; } circle:first-of-type { r: 30%; fill: lightgreen; stroke: black; } 

どちらの場合も、円の半径は SVG ビューポートの正規化された対角線の 30% です。半径 r は $0.3\times \frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$ と同等です。最初の画像は 300 と 150 の CSS ピクセルを使用し、2 番目の画像は 200 と 100 の SVG ビューボックス単位を使用していますが、30% は比例した値です。その結果、r の値は同じになります。 47.43 ビューボックス単位で、71.15 CSS ピクセルに解決されます。

r は同じだが、 2 番目の SVG は 50% 拡大され、中心が 50% 下に、そして右に押されているため、中心点が異なっています。

• 幾何プロパティ: r, cx, cy, rx, ry, x, y, width, height
• fill
• stroke
• paint-order
• border-radius 一括指定プロパティ
• radial-gradient
• <basic-shape> データ型
• SVG の r 属性