Utwórz prostokąt svg wypełniony innym kolorem tła procentowo lub pikselowo - html5, css3, knockout.js, svg

Chcę tworzyć dynamiczne prostokąty svg za pomocą javascript. Te prostokąty powinny być rodzajem dwuwymiarowego paska diagramu wypełnionego wieloma kolorami tła, tak jak poniżej:

Czy istnieje jakiś kształt dla svg, który może obsługiwać wiele kolorów tła? Nie chcę używać wielu prostokątów i staram się je pozycjonować ...

Wydarzenie byłoby lepsze, gdyby istniał rodzaj stosu paneli, w którym można umieścić elementy potomne ...

ponieważ wtedy chciałbym związać te elementy z knockoutjs.

Odpowiedzi:

Możesz to zrobić za pomocą linearGradient, jeśli ustawisz kolory stopu tak, aby gradient był natychmiastową zmianą koloru na przystankach. Na przykład.

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

Alternatywnie, a może prostszy, można dynamicznie utworzyć 3 rects z 3 różnymi wypełnieniami. Jeśli umieścisz prostokąty jako dzieci a <g> element możesz ustawić transformację na <g> element i ustawi wszystkie prostokąty razem, gdziekolwiek chcesz.