0

In some graphics programs there are corner radius values that are cornerRadiusX and cornerRadiusY. I have even seen topLeftRadiusX and topLeftRadiusY plus six more properties; 2 properties per corner .

For example there is this FXG / SVG code,

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

I've never seen topLeftRadiusX and topLeftRadiusY used together but then again I've never seen them used very much at all.

What are they for and how do they affect the graphic?

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231

1 Answers1

1

They allow you to have rounded corners that are elliptical rather than circular.

<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>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • I see how it's making a difference but my head hasn't wrapped around how the two numbers work together. How is it only affecting the top left corner of the rectangle? Shouldn't it be rounding each corner? Oh, the rect is larger than the view port. – 1.21 gigawatts Oct 04 '15 at 09:35
  • Yes the rectangle is larger than the SVG. That's why you are only seeing the top-left corner. – Paul LeBeau Oct 04 '15 at 15:49