cx

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

<length>

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

<percentage>

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

cx = 
  <length-percentage>  

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

この例では、 cx の基本的な使用例と、 CSS の cx プロパティが cx 属性を引き継ぐ仕組みを説明しています。

HTML

SVG には、同一の <circle> 要素と同一の <ellipse> 要素が 2 つずつ含まれます。それらの cx 属性値はそれぞれ、 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

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

svg {
  border: 1px solid;
}

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

結果

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

この例では、cx にパーセント値を使用する方法を示しています。

HTML

前回と同じマークアップを使用します。

<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

CSS は、前回の例とほぼ同様です。唯一の違いは CSS の cx プロパティ値で、この例では、 <circle> には 30% のパーセント値、 <ellipse> には 80% のパーセント値を使用しています。

svg {
  border: 1px solid;
}

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

結果

cx にパーセント値を使用する場合、値は SVG ビューポートの幅からの相対値となります。 ここでは、スタイル設定の円と楕円の中心の X 軸座標は、それぞれ現在の SVG ビューポートの幅の 30% と 80% です。幅が既定で 300px であるため、cx の値は SVG ビューポートの左端から 90px と 240px となります。

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