SVG cy 属性

SVG 是一种用于创建矢量图形的 XML 标记语言，cy 属性是 SVG 中的一个参数，用于指定 SVG 图形中基于坐标系的某个元素的垂直位置。本文将介绍 SVG cy 属性的相关知识点。

基本语法

SVG cy 属性可以通过以下方式来指定某个元素的垂直位置：

<circle cx="50" cy="50" r="40" fill="red" />

在上述代码中，cx 和 cy 属性分别指定了圆心的横坐标和纵坐标。

取值范围

cy 属性的取值范围为一个浮点值，表示该元素的垂直位置。如果未指定 cy 属性，则默认为 0。在 SVG 中，坐标系的原点位于左上角。

单位

cy 属性的单位可以是 px、em 或其他任何长度单位，例如：

<rect x="20" y="20" width="150" height="150" fill="yellow" />
<circle cx="50" cy="50px" r="40" fill="red" />
<circle cx="100" cy="50em" r="40" fill="green" />

动态设定 cy 属性

通过 JavaScript，可以动态地为 cy 属性设定值，代码如下：

var circle = document.getElementById("myCircle");
circle.setAttribute("cy", "100");

总结

本文介绍了 SVG cy 属性的基本概念、语法、取值范围和单位，以及动态设定 cy 属性的方法。在 SVG 中，cy 属性是非常重要的一个属性，可以控制元素在垂直方向上的位置。