如何在帶圓角的SVG中實現分割條形象化？

我想在SVG中實現一個可視化，它基本上是一個分成幾種顏色的條。有點像這個HTML + CSS代碼片段產生的東西。如何在帶圓角的SVG中實現分割條形象化？

#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>

它必須是SVG因爲可視化內容將被追加到其他SVG元素，我不希望使用foreignObject。

我試圖將小rects成一個SVG元素，即

，但我不能看我怎麼可以實現圓角這種方法。在我的例子中，一個圓角可以包含幾個較小的矩形。

此外，svg元素不會注意border-radius CSS屬性。

也許我可以使用一個多彩色線條的線條使這個可視化？

來源

2017-02-09 dangerChihuahua007

有很多方法可以做到這一點。

使用<clipPath>
使用<mask>
使用<linearGradient>

例如，使用梯度：

<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>

來源

2017-02-09 03:25:59

如何在帶圓角的SVG中實現分割條形象化？

回答

相關問題