cy

<length> および <percentage> 値で、円または楕円の垂直方向の中心を記述します。

<length>

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

<percentage>

パーセント値は、現在の SVG ビューポートの高さを参照します。

cy = 
  <length-percentage>  

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

この例では、 SVG には、同一の <circle> 要素と同一の <ellipse> 要素が 2 つずつ含まれます。それらの cy 属性値はそれぞれ、 50 と 150 です。

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

CSS を使用して、最初の円と最初の楕円のみスタイル設定し、それらの双子図形には既定のスタイルを使用できるようにします（fill は既定で黒）。 cy プロパティを使用して SVG の cy 属性の値を上書きし、さらに fill と stroke を与えて、各ペアの最初の図形を双子と区別します。 ブラウザーは、既定では SVG 画像を幅 300px、高さ 150px でレンダリングします。

svg {
  border: 1px solid;
}

circle:first-of-type {
  cy: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cy: 100px;
  fill: pink;
  stroke: black;
}

スタイル設定された円の中心は、 SVG ビューポートの上端から 30px の距離にあり、スタイル設定された楕円の中心は、上端から 180px の距離にあります。これは、 CSS の cy プロパティ値で定義されているとおりです。スタイル設定されていない図形の中心は、 SVG ビューポートの上端から 50ox と 150px の距離にあります。これは、 SVG の cy 属性値で定義されているとおりです。

この例では、前回の例と同じマークアップを使用します。唯一の違いは、 CSS の cy プロパティ値です。この場合、 30% と 50% のパーセント値を使用しています。

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" />
  <circle cx="50" cy="50" r="30" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
  <ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>

svg {
  border: 1px solid;
}

circle:first-of-type {
  cy: 30%;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cy: 50%;
  fill: pink;
  stroke: black;
}

この場合、円と楕円の中心の Y 軸座標は、それぞれ現在の SVG ビューポートの高さの 30% と 50% です。画像の高さは既定では 150px であるため、 cy の値は 45px と 120px に相当します。

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