HTML SVG 画正方形和四分之一圆的差集

以下是用 HTML SVG 画出正方形和四分之一圆，然后取它们的差集部分的代码：

<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" fill="#000" />
  <path d="M0,100 A100,100 0 0,1 100,0 L0,0 Z" fill="#fff" />
</svg>

通过rect元素画出一个黑色的正方形，通过path元素画出一个四分之一圆。path元素的d属性用于定义路径，这里使用了弧形命令A来画圆弧。A命令的参数依次是：rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y。其中rx和ry是圆弧的半径，这里设为100，表示和正方形等大；x-axis-rotation是椭圆的旋转角度，这里设为0表示不旋转；large-arc-flag和sweep-flag是控制圆弧的方向和大小的标志，这里设为0表示画四分之一圆；最后两个参数是圆弧的终点坐标，这里设为(100, 0)。

最后，通过设置rect元素的fill属性为黑色，path元素的fill属性为白色，就可以得到一个黑色正方形和一个白色四分之一圆。它们的差集部分就是一个四分之三圆加上一个黑色矩形的形状，如下图所示：