I want to implement a visualization of an SVG object that is shared in several colors.

It seems something like this, this fragment of HTML + CSS reproduces.

#wholeThing { background: #000; border-radius: 30px; width: 300px; height: 100px; overflow: hidden; } #wholeThing div { float: left; height: 100%; } #foo { background: red; width: 10px; } #bar { background: green; width: 10px; } #baz { background: blue; width: 270px; } 
 <div id='wholeThing'> <div id='foo'></div> <div id='bar'></div> <div id='baz'></div> <div id='quux'></div> </div>
This should be implemented in SVG, because the visualization will be added to other SVG elements, and I do not want to use the foreignobject tag.

I tried to insert smaller rectangles into one SVG element, for example:

  <svg> <rect> ... <rect> ... <rect> ... </svg>

But I do not see how I can implement rounded corners with this approach. One rounded corner can cover several small rectangles, as in my example.

In addition, the SVG element does not accept the border-radius CSS property.
Maybe I could do this visualization using multi-colored stroke lines?

Source: How could I have implemented visualization in SVG with rounded corners?

1 answer 1

There are several ways you can do this:

  • using - <clipPath>
  • using - <mask>
  • using - <linearGradient>

For example, using a gradient:

  <svg> <defs> <linearGradient id="graph1"> <stop offset="0%" stop-color="red"/> <stop offset="20%" stop-color="red"/> <stop offset="20%" stop-color="orange"/> <stop offset="70%" stop-color="orange"/> <stop offset="70%" stop-color="green"/> </linearGradient> </defs> <rect x="0" y="0" width="300" height="50" rx="10" ry="10" fill="url(#graph1)"/> </svg>

Answered - Paul LeBeau