SVG y 属性

SVG y 属性用于定义图形或元素的垂直位置。它表示从svg画布的顶部边缘到图形或元素的顶部边缘的距离。

语法

<svg>
  <rect x="50" y="50" width="100" height="100"/>
  <circle cx="200" cy="100" r="50"/>
  <text x="100" y="30">SVG y 属性</text>
</svg>

在上面的例子中，y 属性被用来定义矩形、圆形和文本的位置。

值

y 属性可以接受以下值：

• 数字：表示从画布顶部边缘到元素顶部边缘的距离。
• 百分比：表示从画布顶部边缘到元素顶部边缘的距离，作为画布高度的百分比。
• 自动：表示浏览器应该自动计算元素的位置。

示例

指定数字

<svg>
  <rect x="50" y="50" width="100" height="100"/>
  <rect x="175" y="75" width="100" height="100"/>
  <rect x="300" y="100" width="100" height="100"/>
  <text x="100" y="30">数字</text>
</svg>

在上面的例子中，第一个矩形的 y 属性被设置为 50，第二个矩形的 y 属性被设置为 75，第三个矩形的 y 属性被设置为 100。

指定百分比

<svg>
  <rect x="50" y="10%" width="100" height="100"/>
  <rect x="175" y="20%" width="100" height="100"/>
  <rect x="300" y="30%" width="100" height="100"/>
  <text x="100" y="30">百分比</text>
</svg>

在上面的例子中，第一个矩形的 y 属性被设置为 10%，第二个矩形的 y 属性被设置为 20%，第三个矩形的 y 属性被设置为 30%。

自动计算

<svg>
  <rect x="50" y="auto" width="100" height="100"/>
  <rect x="175" y="auto" width="100" height="100"/>
  <rect x="300" y="auto" width="100" height="100"/>
  <text x="100" y="30">自动计算</text>
</svg>

在上面的例子中，所有矩形的 y 属性都被设置为 auto，浏览器会根据其他元素的位置自动计算它们的垂直位置。

总结

SVG y 属性用于定义图形或元素的垂直位置。它可以接受数字、百分比和自动三种值，可以用于各种形状和元素中。