javascript - How to fill an SVG element half portion by a pattern -


i have svg elements on there pattern applied. pattern applied fill color. means pattern fills whole svg element. want partially fill element using pattern.

example

after applying pattern:

enter image description here

i want pattern apply on bottom half of circle. there way that?

what create 2 circles , apply mask on 1 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>


Comments

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

python - GRASS parser() error -

Swift game error message -