阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG 椭圆 <ellipse>

      SVG 椭圆 <ellipse>


      Ellipse 是circle元素更通用的形式,你可以分别缩放圆的x半径和y半径(通常数学家称之为长轴半径和短轴半径)。

      <ellipse cx="75" cy="75" rx="20" ry="5"/>
      
      • rx
        • 椭圆的x半径
      • ry
        • 椭圆的y半径
      • cx
        • 椭圆中心的x位置
      • cy
        • 椭圆中心的y位置

      椭圆与圆很相似。不同之处在于椭圆有不同的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>
      

      渲染效果




      实例 :创建了三个累叠而上的椭圆:

      下面是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>
      

      渲染效果




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

      <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>
      

      渲染效果



      目录
      目录