CODEWITHSUNDEEP
htmlcsssvgbezier
Zephyr Mays
Zephyr Mays

Reputation: 487

Negative of SVG curved <Path>

I'm having a heck of time creating the negative of this svg/path curve.

What I'd like is the white to be the filled part described by the <path>, and the blue to be transparent to the element behind - exactly the opposite of the current depiction.

Any thoughts are greatly appreciated!

http://jsfiddle.net/CG_Pilot/0nw862zf/6/

<svg class="curveDownColor curveDown" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="50" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0 0 C 50 100 80 100 100 0 Z"></path>
</svg>

With this CSS:

.curveDownColor {
    fill: blue;
    stroke: yellow;
    stroke-width: 3px;
    border: 2px dashed green;
}

http://jsfiddle.net/CG_Pilot/0nw862zf/2/embedded/result/

Upvotes: 0

Views: 1476

Answers (2)

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53597

So, like this? http://jsfiddle.net/0nw862zf/8

All I did was simply add the box boundaries to the path here. So instead of Z at the end of your path, make the path follow the boundary with L 100 100, L 0 100, then Z

enter image description here

Upvotes: 1

defghi1977
defghi1977

Reputation: 5349

The svg has viewBox, so we can wrap the path shape by rect path to invert fill area.
(sometimes needs fill-rule attribute.)

<svg class="curveDownColor curveDown" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="50" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M-100,-100h300v300h-300zM0 0 C 50 100 80 100 100 0 Z"></path>
</svg>

Upvotes: 1

Related Questions