在SVG中绘制一个空心圆
我不知道如何在SVG中绘制一个空心圆。
我想要一个充满了颜色的环形，然后有一个黑色的轮廓。
我想这样做的方式是有两个圆圈，一个半径小于另一个。 问题是当我填充它们时，如何让小圆圈采用与它所在的相同的填充颜色？
只需使用fill="none" ，然后只绘制stroke （轮廓）。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" /> </svg>
感谢Chasbeen，我想出了如何在SVG中制作一个真正的戒指/甜甜圈。 请注意，外圈实际上并没有closures，这只在使用笔画时才显而易见。 当你有许多同心圆环时，特别是如果它们是交互式的（比如CSShover命令）非常有用。
对于绘图命令…
M cx, cy // Move to center of ring m 0, -outerRadius // Move to top of ring a outerRadius, outerRadius, 0, 1, 0, 1, 0 // Draw outer arc, but don't close it Z // default fill-rule:even-odd will help create the empty innards m 0 outerRadius-innerRadius // Move to top point of inner radius a innerRadius, innerRadius, 0, 1, 1, -1, 0 // Draw inner arc, but don't close it Z // Close the inner ring. Actually will still work without, but inner ring will have one unit missing in stroke
JSFiddle – 包含几个环和CSS来模拟交互性。 注意缺点是在起始点（顶部）缺less一个像素，只有在上面添加一个笔划才会出现。
编辑：find这个SO回答 （更好的是， 这个答案 ），其中描述了如何获得一般空内脏
这是经典的甜甜圈形状我不确定你是否试图用标准的SVG或产生SVG的JavaScript来实现这个目标可以通过在单个path定义中包含一个相对的“moveto”命令来实现
去这里http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2
然后点击交互式示例右侧的“圆环孔”。 至less你可以看到制作红色甜甜圈的path定义。
MDragon00的答案是有效的，但是内部和外部的圈子并不完全一致（例如居中）。
我修改了他的方法，使用4个半圆弧（2个外部和2个内部反向）来完成alignment。
<svg width="100" height="100"> <path d="M 50 10 A 40 40 0 1 0 50 90 A 40 40 0 1 0 50 10 ZM 50 30 A 20 20 0 1 1 50 70 A 20 20 0 1 1 50 30 Z" fill="#0000dd" stroke="#00aaff" stroke-width="3" /> </svg> <!-- Using this path definition as d: M centerX (centerY-outerRadius) A outerRadius outerRadius 0 1 0 centerX (centerY+outerRadius) A outerRadius outerRadius 0 1 0 centerX (centerY-outerRadius) Z M centerX (centerY-innerRadius) A innerRadius innerRadius 0 1 1 centerX (centerY+innerRadius) A innerRadius innerRadius 0 1 1 centerX (centerY-innerRadius) Z -->
这是一个例程来创build一个尽可能接近于一个圆的贝塞尔弧。 你需要四个人在一个完整的循环path。
BezierCurve BezierArc(double ox, double oy, double r, double thetaa, double thetab) { double theta; double cpx[4]; double cpy[4]; int i; int sign = 1; while (thetaa > thetab) thetab += 2 * Pi; theta = thetab - thetaa; if (theta > Pi) { theta = 2 * Pi - theta; sign = -1; } cpx[0] = 1; cpy[0] = 0; cpx[1] = 1; cpy[1] = 4.0 / 3.0 * tan(theta / 4); cpx[2] = cos(theta) + cpy[1] * sin(theta); cpy[2] = sin(theta) - cpy[1] * cos(theta); cpx[3] = cos(theta); cpy[3] = sin(theta); cpy[1] *= sign; cpy[2] *= sign; cpy[3] *= sign; for (i = 0; i < 4; i++) { double xp = cpx[i] * cos(thetaa) + cpy[i] * -sin(thetaa); double yp = cpx[i] * sin(thetaa) + cpy[i] * cos(thetaa); cpx[i] = xp; cpy[i] = yp; cpx[i] *= r; cpy[i] *= r; cpx[i] += ox; cpy[i] += oy; } return BezierCurve({cpx[0], cpy[0]},{cpx[1], cpy[1]}, {cpx[2], cpy[2]}, {cpx[3], cpy[3]}); }
