Claw Petals and shape filling don't work together

[davidhatten]

Shape filling isn't working with claw petals, I think it's because both arcs are being draw towards the same point. Maybe the right way to fix this is to rewrite claw petals such that it has two points but they're the same point.

[davidhatten]

This is a default Claw Petal at the time of this writing

So here's what happens when you trigger shape filling on a claw petal

What's happening is, the concave side of the claw is getting filled opposite the way it should, and the fill on convex side of the curve appears to be bleeding across the concave line as well.

[davidhatten]

This is going to be more involved than I thought. Filling a closed shape like this with how petals are constructed is going to require some reworking in general.

Petals are constructed one half at a time. Petals are filled from the arc to the mid line. What this means is that the center won't be filled as expected when the innerPetalGap is greater than 0.

In the case of standard petals, this is reasonable enough. But the claw petal is intended to be used as an open-body shape.

[davidhatten]

One strategy is to put a small white circle at the center of the shape and then fill from there, but that will get all messed up if the inner or outer gaps are increased.

What if I draw a circle around it?

In general, the inner and outer gap settings really mess with filling. I'm not sure of any way around that, and maybe I shouldn't worry about it until someone complains?

[davidhatten]

Curvey petals can also suffer from a similar issue if they flare out one of the sides and create a shape with a concavity.

The way each of these SVG curves are drawn, even if they are part of the same path, will result in this behavior. SVG draws an implicit line connecting the endpoints. When attempting to make a shape with concavities like this, it results in filling outside of the curve.

[davidhatten]

It's the M step (.to in the SVG library you're using). M breaks the current shape and starts a new one, thus drawing a stroke back to the start of the shape (i.e., the single arc) and causing a ruckus when it comes time to fill

When building the shapes, only 1 M command should be used, and that's at the start.

In addition, inner and outer gaps should be drawn with a transparent stroke. that way they can be filled as a layer, but do not mar the drawing.

This won't be trivial; styles are global, there's no easy way currently to say "these paths have this style". Additionally, this will involve redesigning... quite a bit. Each curve will have to be a separate path in one style, linked by paths in a transparent style.

[davidhatten]

Another thing to note:

the canvas HATES <path> attributes that don't start with an M command. Just refuses to play ball with them. The entire shape has to be in one path, so styling individual lines isn't going to work.

Maybe the solution is to draw two shapes; one with the lines I want and one with the lines that bound the fill properly, but are transparent. Then the fill fills the transparent layer with solid color (white).

[davidhatten]

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

<clippath> might be what I want for filling in the shapes without drawing lines.