📌  相关文章
📜  SVG CircleElement.cy 属性(1)

📅  最后修改于: 2023-12-03 15:35:11.500000             🧑  作者: Mango

SVG CircleElement.cy 属性

在SVG（Scalable Vector Graphics）中，CircleElement是创建圆形的元素。cy是CircleElement的属性之一，表示圆心在y轴方向上的位置。

语法
<circle cy="cy-position" />

其中，cy-position是一个数值，表示圆心在y轴方向上的位置。

实例

以下是一个简单的SVG文档，展示了如何使用cy属性创建一个圆形，并指定其圆心在y轴方向上的位置。

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

在上述代码中，cx和cy属性指定了圆形的圆心的坐标为(x=50，y=50)。其中cy=50表示圆心在y轴方向上的位置为50。

更多示例

以下是一些更加复杂的示例，展示了cy属性的更多用法。

  1. 在SVG中创建多个圆形，并分别指定它们的圆心在y轴方向上的位置。
<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="red" />
  <circle cx="50" cy="100" r="40" fill="blue" />
  <circle cx="50" cy="150" r="40" fill="green" />
</svg>

在上述代码中，我们创建了三个圆形，分别指定它们的圆心在y轴方向上的位置为50、100和150。

  1. 将圆形旋转一定角度，并指定其圆心在y轴方向上的位置。
<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="red" transform="rotate(45 50 50)" />
</svg>

在上述代码中，我们将一个圆形旋转了45度，并指定其圆心在y轴方向上的位置为50。

参考链接