title: How could I implement a divided bar visualization in SVG with rounded corners?
body: <p>I want to implement a visualization in SVG that is basically a bar that is split among several colors. Kind of like what this HTML+CSS snippet produces.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='wholeThing'&gt;
    &lt;div id='foo'&gt;&lt;/div&gt;
    &lt;div id='bar'&gt;&lt;/div&gt;
    &lt;div id='baz'&gt;&lt;/div&gt;
    &lt;div id='quux'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It must be in SVG because the visualization will be appended to other SVG elements, and I do not want to use <code>foreignObject</code>.</p>
  
  <p>I tried inserting smaller rects into one SVG element, ie</p>
  
  <pre><code>&lt;svg&gt;
    &lt;rect&gt; ...
    &lt;rect&gt; ...
    &lt;rect&gt; ...
  &lt;/svg&gt;
  </code></pre>
  
  <p>but I can't see how I could implement rounded corners with this approach. One rounded corner could encompass several smaller rects as in my example.</p>
  
  <p>Also, the svg element does not heed a border-radius CSS property.</p>
  
  <p>Maybe I could make this visualization using a multi-colored stroke of a line?</p>