CSS绘制SVG基本形状实例页面

展示

代码

• HTML：

  <svg>
      <circle class="circle"></circle>
  </svg>
  <svg>
      <path class="diamon">
  </svg>
  <svg>
      <rect class="rect"></rect>
  </svg>
  <svg>
      <ellipse class="ellipse"></ellipse>
  </svg>

• CSS：

  svg {
      outline: 1px dotted;
      margin: 10px 6px;
  }
  .circle {
      cx: 150px;
      cy: 75px;
      r: 60px;
  }
  .diamon {
      d: path('M150 10L240 75L150 140L60 75');
  }
  .rect {
      x: 30px;
      y: 15px;
      width: 240px;
      height: 120px;
      rx: 10px;
      ry: 10px;
  }
  .ellipse {
      cx: 150px;
      cy: 75px;
      rx: 100px;
      ry: 60px;
  }