CODEWITHSUNDEEP
javascripthtmlsvgpath
Rafael
Rafael

Reputation: 5199

How to draw a curved svg path

How would I (if possible) draw a black border that goes along only the inside of this svg. I have tried stroke and added stroke-width, but this wraps the entire svg. Is there a way to stop the stroke at a certain point?

div{
  width: 300px;
  margin: 0 auto;
  }
<div>
   <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-top" style="fill:#ff0000"><path stroke-width="4" stroke="#0f0f0f" d="M0 0 C50 100 50 100 100 0  L100 100 0 100"></path>        </svg>
</div>

Upvotes: 1

Views: 1522

Answers (1)

Stacey Burns
Stacey Burns

Reputation: 1092

If I understand correctly you want to put a stroke only on the top curved part.

for this, you could add another path but only include the curve:

<path id='curvestroke' d="M0 0 C50 100 50 100 100 0"></path>

You can then style this with fill none and stroke style.

Full svg code:

<div>
   <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-top" style="fill:#ff0000">
       <path  d="M0 0 C50 100 50 100 100 0  L100 100 0 100"></path>        
       <path id='curvestroke' d="M0 0 C50 100 50 100 100 0"></path> 
    </svg>
</div>

css: 

div{
  width: 300px;
  margin: 0 auto;
  }

#curvestroke{

    fill: none;
    stroke: black;
    stroke-width:4px;
}

example fiddle

Upvotes: 1

Related Questions