SVGCircleElement - Web API

SVGCircleElement - Web API | MDN

インスタンスプロパティ

このインターフェイスには、親である SVGGeometryElement から継承したプロパティもあります。

SVGCircleElement.cx 読取専用: このプロパティは、この <circle> 要素の中心の X 座標を定義します。これはこの要素の cx 属性で記述されたものです。
SVGCircleElement.cy 読取専用: このプロパティは、この <circle> 要素の中心の Y 座標を定義します。これはこの要素の cy 属性で記述されたものです。
SVGCircleElement.r 読取専用: このプロパティは、この <circle> 要素の半径を定義します。これはこの要素の r で記述されたものです。

インスタンスメソッド

親インターフェイスである SVGGeometryElement から継承したメソッドがあります。

例

円のサイズ変更

この例では、円を描画し、クリックすると半径をランダムに増減させます。

HTML

html

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 250 250"
  width="250"
  height="250">
  <circle cx="100" cy="100" r="50" fill="gold" id="circle" />
</svg>

JavaScript

const circle = document.getElementById("circle");

function clickCircle() {
  // 円の半径が増加するか減少するかをランダムに決定する
  const change = Math.random() > 0.5 ? 10 : -10;
  // 円の半径を最小 10 から最大 250 の範囲に制限するので、
  // 見えなくなったりビューポートよりも大きくなったりしない
  const newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250);
  circle.setAttribute("r", newValue);
}

circle.addEventListener("click", clickCircle);

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGCircleElement

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on 2025年11月11日 by MDN contributors.