• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • SVG 椭圆

    SVG 椭圆- <ellipse>

    实例 1

    <ellipse>元素是用来创建一个椭圆:

    椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的:

    下面是SVG代码:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <ellipse cx="300" cy="80" rx="100" ry="50"
      style="fill:yellow;stroke:purple;stroke-width:2"/>
    </svg>

    代码解析:

    • CX属性定义的椭圆中心的x坐标
    • CY属性定义的椭圆中心的y坐标
    • RX属性定义的水平半径
    • RY属性定义的垂直半径

    实例 2

    下面的例子创建了三个累叠而上的椭圆:

    下面是SVG代码:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
      <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
      <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
    </svg>

    实例 3

    下面的例子组合了两个椭圆(一个黄的和一个白的):

    下面是SVG代码:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
      <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
    </svg>


    上篇:SVG 圆形

    下篇:SVG 参考手册