Shape divider using an SVG issue

1

In the past I had an issue with using an SVG as a shape divider. The issue was resolved (found here)

In , I,m guessing one of the more recent bricks updates, the previous solution is no longer valid.

The page:

VIDEO LINK

Walks through the issue….

Thank you!!

2

Reverting CSS statements is pretty tricky because it works on a ‘latest statement’ basis.

I had a look and you should be able to replace the code in your class (the revert-layer one) with the following statement:

/* Sets all paths in the SVG element to white */
%root% .bricks-shape-divider .bricks-shape-divider-inner svg path {
    fill: #fff;
}

/* Sets the #Gradient_underlay_swoop path to use the gradient fill */
%root% .bricks-shape-divider .bricks-shape-divider-inner svg path#Gradient_underlay_swoop {
    fill: url("#linear-gradient");
}

If this still doesn’t work you should be able to add !important to the end of each statement.

Hope this helps!

Cheers,
Ben from Grow My Business

1 Like
3

That makes perfect sense. You just pulled the styles out of the svg and force formatted them with css.
Your awesome.
Thank you for taking the time to work this out!!

1 Like