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:
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
Post a Comment