y

要素

この属性は、下記で説明する SVG 要素で使用することができます。

<feBlend>

<feBlend> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feColorMatrix>

<feColorMatrix> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feComponentTransfer>

<feComponentTransfer> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feComposite>

<feComposite> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feConvolveMatrix>

<feConvolveMatrix> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feDiffuseLighting>

<feDiffuseLighting> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feDisplacementMap>

<feDisplacementMap> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feDropShadow>

<feDropShadow> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feFlood>

<feFlood> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feFuncA>

<feFuncA> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feFuncB>

<feFuncB> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feFuncG>

<feFuncG> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feFuncR>

<feFuncR> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feGaussianBlur>

<feGaussianBlur> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feImage>

<feImage> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feMerge>

<feMerge> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feMergeNode>

<feMergeNode> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feMorphology>

<feMorphology> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feOffset>

<feOffset> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<fePointLight>

<fePointLight> の場合、 y は <filter> 要素の primitiveUnits 属性で定義される座標系での光源の Y 位置を定義します。

<feSpecularLighting>

<feSpecularLighting> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feSpotLight>

<feSpotLight> の場合、 y は <filter> 要素の primitiveUnits 属性で定義される座標系での光源の Y 位置を定義します。

<feTile>

<feTile> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<feTurbulence>

<feTurbulence> の場合、 y はこのプリミティブの描画領域における最小の Y 座標を定義します。

<filter>

<filter> の場合、 y はこのフィルターの描画領域における左上隅の Y 座標を定義します。

<foreignObject>

<foreignObject> の場合、 y はビューポートの左上隅の Y 座標を定義します。

<image>

<image> の場合、 y はこの画像の左上隅の Y 座標を定義します。

<mask>

<mask> の場合、 y は、その効果の領域の左上隅の Y 座標を定義します。この属性の正確な効果は、 maskUnits 属性に影響されます。

<pattern>

<pattern> の場合、 y はタイルパターンの左上隅の Y 座標を定義します。この属性の正確な効果は、 patternUnits と patternTransform 属性に影響されます。

<rect>

<rect> の場合、 y は図形の左上隅の Y 座標を定義します。

<svg>

<svg> の場合、 y はそのビューポートの左上隅の Y 座標を定義します。

<text>

<text> にある値が 1 つの場合、 y はコンテンツテキストの位置を配置しなければならない Y 座標を定義します。コンテンツテキストの位置は、通常、テキストの最初の行のベースライン上の点です。正確なコンテンツテキスト位置は、 text-anchor や direction など、他のプロパティの影響を受けます。

複数の値がある場合、y はテキストから個々の文字への Y 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- テキストのベースラインを素材化する水平線 -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- x の位置指定を素材化する垂直行 -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <!-- y を単一の値で -->
  <text y="40%" x="5%">SVG</text>

  <!-- y を複数の値で -->
  <text y="40%,60%,80%" x="55%">SVG</text>
</svg>

text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}

<tspan>

<tspan> にある値が 1 つの場合、 y はコンテンツテキストの位置を配置しなければならない Y 座標を定義します。コンテンツテキストの位置は、通常、テキストの最初の行のベースライン上の点です。正確なコンテンツテキスト位置は、 text-anchor や direction など、他のプロパティの影響を受けます。

複数の値がある場合、y はテキストから個々の文字への Y 座標を定義します。値が文字よりも少ない場合、残りの文字は最後に配置された文字と一直線上に配置されます。値が文字よりも多い場合は、余分な値は無視されます。

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- テキストのベースラインを素材化する水平線 -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- x の位置指定を素材化する垂直線 -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <text>
    <!-- y を単一の値で -->
    <tspan y="40%" x="5%">SVG</tspan>

    <!-- y を複数の値で -->
    <tspan y="40%,60%,80%" x="55%">SVG</tspan>
  </text>
</svg>

text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}

<use>

<use> の場合， y は参照される要素の左上隅の Y 座標を定義します．

例

この例では、 3 つの <rect> 要素が含まれており、それぞれ y 値が前回より小さくなっています。

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <rect y="220" x="20" width="60" height="60" fill="red" />
  <rect y="120" x="20" width="60" height="60" fill="yellow" />
  <rect y="20" x="20" width="60" height="60" fill="purple" />
</svg>

仕様書

関連情報

• CSS の y プロパティ