svg - 边界上 topLeftRadiusX 和 topLeftRadiusY 中的 X 和 Y 有什么作用？

Question

在某些图形程序中，角半径值是cornerRadiusX 和cornerRadiusY。我什至见过 topLeftRadiusX 和 topLeftRadiusY 以及另外六个属性；每个角落 2 个属性。

例如有这个 FXG / SVG 代码，

    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" topLeftRadiusX="4" topRightRadiusX="4">
    </s:Rect>

我从来没有见过 topLeftRadiusX 和 topLeftRadiusY 一起使用，但是我从来没有见过他们用得太多。

它们有什么用，它们如何影响图形？

Answer 1

它们允许您拥有椭圆形而不是圆形的圆角。

<svg width="100" height="100">
  <rect width="200" height="200" rx="80" />
</svg>

<svg width="100" height="100">
  <rect width="200" height="200" rx="50" ry="80"/>
</svg>