Създайте svg правоъгълник, пълен с различен цвят на фона, процент или пиксел - html5, css3, knockout.js, svg

Искам да създам SVG правоъгълници динамично с javascript. Тези правоъгълници трябва да бъдат вид 2D диаграма бар, изпълнен с множество цветове на фона, точно както е така:

Има ли някаква форма за SVG, която може да се справи с различни цветове на фона? Не искам да използвам няколко правоъгълника и да се опитам да ги позиционирам ...

Събитието ще бъде по-добре, ако би имало някакъв вид статичен панел, в който мога да поставя в детски елементи ...

защото тогава бих искал да обвържа тези елементи с нокаут.

Отговори:

Можете да го направите с линеен градиент, ако зададете цветовете на стоп, така че градиентът да е моментална промяна на цвета при спиранията. Например

<svg xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="MyGradient" x2="0%" y2="100%">
<stop offset="33%" stop-color="white" />
<stop offset="33%" stop-color="#FF6" />
<stop offset="66%" stop-color="#FF6" />
<stop offset="66%" stop-color="#F60" />
</linearGradient>
</defs>

<rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
x="100" y="100" width="200" height="600"/>
</svg>

Като алтернатива и може би по-просто, бихте могли да създадете динамично 3 ректа с три различни запълвания. Ако поставите правоъгълниците като деца на <g> можете да зададете трансформация на <g> елемент и той ще позиционира всички правоъгълници заедно, където искате.