How to split svg rectangle?

Question

I am trying to split the rectangle such that it should divide equally. I also don't know whether is it possible to split the svg rectangle?

This is the svg code:

<rect x="29" y="239" width="200" height="80" r="8" rx="8" ry="8" fill="#006699" stroke="#337ab7" style="cursor: pointer;" stroke-width="1" transform="matrix(1,0,0,1,0,-120)"></rect>

<text style="text-anchor: middle; font: 13px &quot;Arial&quot;; cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#ffffff" font-size="13px" transform="matrix(1,0,0,1,0,-120)"><tspan dy="4.5">one</tspan></text>

output:

But i am trying to create like that:

I have followed this tutorial:

https://www.w3schools.com/graphics/svg_rect.asp

This is the another document which i tried to work around but i got no help:

https://www.w3.org/TR/SVG/painting.html#FillRuleProperty

other tutorials:

https://flaviocopes.com/svg/#path

Answer 1

You can use a linearGradient to display multiple colours if you use multiple stops at each transition point to create an instant transition.

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 300 300"> <defs> <linearGradient id="MyGradient" x2="0%" y2="100%"> <stop offset="50%" stop-color="green" /> <stop offset="50%" stop-color="white" /> </linearGradient> </defs> <rect x="29" y="239" width="200" height="80" r="8" rx="8" ry="8" fill="url(#MyGradient)" stroke="#337ab7" style="cursor: pointer;" stroke-width="1" transform="matrix(1,0,0,1,0,-120)"></rect> <text style="text-anchor: middle; font: 13px 'Arial' cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px &quot;Arial&quot;" fill="#ffffff" font-size="13px" transform="matrix(1,0,0,1,0,-140)"><tspan dy="4.5">one</tspan></text> <text style="text-anchor: middle; font: 13px 'Arial' cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px &quot;Arial&quot;" fill="black" font-size="13px" transform="matrix(1,0,0,1,0,-100)"><tspan dy="4.5">one</tspan></text> </svg>