CODEWITHSUNDEEP
htmlsvg
Maurice
Maurice

Reputation: 1092

Inverse-fill svg shape

I want to make an horizontal s-curved shape where the bottom part of the shape is filled with a color.

When i use a quadratic bézier curve i get the shape that i want, but when i apply a fill color, the inside of the shapes get filled. See below

<svg width="400" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path d="M0,30 Q100,0 200,30 T400,30" stroke="blue" stroke-width="1" fill="blue"/>
    </svg>

I then tried do work with individual paths, which got me closer, but i want to reverse-fill the second path, but i have no idea how. This is my shape

<svg width="400" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path d="M0,30 Q100,0 200,30" stroke="blue" stroke-width="1" fill="blue"/>
      <path d="M200,30 Q300,60 400,30" stroke="blue" stroke-width="1" fill="none" />
        <rect x="0" y="30" width="200" height="30" fill="blue" />
    </svg>

How can i apply a filling color to the bottom side of the right curve?

Upvotes: 1

Views: 1664

Answers (1)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13526

If I understood the task correctly, you need to add three straight lines to your path (30px down from the end of the curve, then 400px left, and then 30px up, or just complete the path). You can use v, h, and Z commands in the same d attribute of the same path element for it:

<svg width="400" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path d="M0,30 Q100,0 200,30 T400,30 v30 h-400 Z" stroke="blue" stroke-width="1" fill="blue"/>
    </svg>

Upvotes: 3

Related Questions