SVGRect: x プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

x プロパティは、要素の位置の水平座標を記述します。

使用コンテキスト

名前 x
<length> | <percentage>
初期値 0
適用先 <mask>, 'svg', 'rect', 'image', 'foreignObject'
継承 なし
パーセント値 現在のビューポートの大きさを参照(単位を参照)
メディア 視覚
計算値 絶対長またはパーセント値
アニメーション

シンプルな使用法

<coordinate> はユーザー座標系での長さで、指定された軸方向(X 座標の場合は X 軸、 Y 座標の場合は Y 軸)のユーザー座標系の原点からの距離です。構文は <length> と同じです。

html
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="0" width="40" height="40" fill="blue"></rect>
</svg>

<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <rect x="40" y="0" width="40" height="40" fill="green"></rect>
</svg>