Dessiner un cercle creux en SVG

Question

Je ne sais pas comment aborder le dessin d'un cercle creux en SVG.

J'aimerais que la forme d'un anneau soit remplie d'une couleur et que son contour soit noir.

La façon dont j'ai pensé à le faire était d'avoir 2 cercles, l'un avec un plus petit rayon que l'autre. Le problème est que lorsque je les remplis, comment faire en sorte que le plus petit cercle prenne la même couleur de remplissage que le cercle sur lequel il se trouve ?

Answer 1

Voici une routine pour créer un arc de bézier qui se rapproche le plus possible d'un cercle. Il en faut quatre dans une trajectoire pour obtenir un cercle complet.

 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]});
    }