SVGEllipseElement - 用于访问 <ellipse> 元素的属性

SVGEllipseElement 接口可用于访问 <ellipse> 元素的属性。

属性

该接口还继承了其父接口 SVGGeometryElement 的属性。

SVGEllipseElement.cx 只读

该属性返回一个 SVGAnimatedLength，反映给定的 <ellipse> 元素的 cx 属性。

SVGEllipseElement.cy 只读

该属性返回一个 SVGAnimatedLength，反映给定的 <ellipse> 元素的 cy 属性。

SVGEllipseElement.rx 只读

该属性返回一个 SVGAnimatedLength，反映给定的 <ellipse> 元素的 rx 属性。

SVGEllipseElement.ry 只读

该属性返回一个 SVGAnimatedLength，反映给定的 <ellipse> 元素的 ry 属性。

方法

该接口没有实现任何特有的方法，但继承了其父接口 SVGGeometryElement 的方法。

实例

SVG 内容

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse"
      onclick="outputSize();"></ellipse>
</svg>

JavaScript 内容

function outputSize() {
  const ellipse = document.getElementById("ellipse");

  // "输出 “水平半径：100 垂直半径：60”
  console.log(
    `水平半径：${ellipse.rx.baseVal.valueAsString}`,
    `垂直半径：${ellipse.ry.baseVal.valueAsString}`
  )
}

结果

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse"
      onclick="outputSize();"></ellipse>
</svg>

<script>
function outputSize() {
  const ellipse = document.getElementById("ellipse");

  // "输出 “水平半径：100 垂直半径：60”
  console.log(
    `水平半径：${ellipse.rx.baseVal.valueAsString}`,
    `垂直半径：${ellipse.ry.baseVal.valueAsString}`
  )
}
</script>

尝试一下 »

规范

规范
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGEllipseElement

桌面浏览器兼容性

暂无兼容数据

相关链接