Créez un rectangle svg contenant différentes couleurs d'arrière-plan par pourcentage ou pixel - html5, css3, knockout.js, svg

Je veux créer des rectangles svg de manière dynamique avec javascript. Ces rectangles devraient être une sorte de barre de diagramme 2D remplie de plusieurs couleurs d'arrière-plan, comme ceci:

Existe-t-il une forme pour svg pouvant gérer plusieurs couleurs d'arrière-plan? Je ne veux pas utiliser plusieurs rectangles et essayer de les positionner ...

Il serait préférable que l'événement se produise s'il existe une sorte de stackpanel dans lequel je peux insérer des éléments enfants ...

car alors je voudrais lier ces éléments à knockoutjs.

Réponses:

Vous pouvez le faire avec un linearGradient, si vous définissez les couleurs d’arrêt de sorte que le dégradé soit un changement instantané de couleur aux arrêts. Par exemple.

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

Alternativement, et peut-être plus simplement, vous pouvez créer dynamiquement 3 modèles avec 3 remplissages différents. Si vous mettez les rectangles en tant qu'enfants d'un <g> élément, vous pouvez définir une transformation sur le <g> élément et il placera tous les rectangles ensemble où vous voulez.