How to fill an SVG element half portion by a pattern

Issue

I have some SVG elements on which there are some pattern already applied. The pattern is applied as fill color. That means the pattern fills up whole SVG element. Basically i want to partially fill up my element using the pattern.

Example

After applying pattern:

enter image description here

I want this pattern to apply on bottom half of the circle. Is there any way to do that?

Solution

What you could do is create two circles and apply mask on one with fill

<svg width="105px" height="105px">
  <mask x="0" y="0" id="half">
    <rect y="50%" fill="white" width="100%" height="50%" />
  </mask>
  
  <circle fill="transparent" stroke="black" stroke-width="3px" cx="50%" cy="50%" r="50"/>
  <circle fill="#C04C4C" mask="url(#half)" stroke="black" stroke-width="3px" cx="50%" cy="50%" r="50"/>
</svg>

Answered By – Nenad Vracar

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published