Javascript Girl
  1. Javascript Girl
  3. Remplir un chemin SVG avec plusieurs couleurs
Intereting Posts
Onclick événement non déclenché lors de l'échange déclenché juste avant Comment modifier une boîte de dialogue déjà enregistrée dans CKEditor Cas d'utilisation Ruby pour nil, équivalent à Python Aucun ou JavaScript indéfini Exécutez un fichier .jar avec des paramètres de JavaScript Est-ce que ExternalInterface, dans Flex 3, a une limitation de taille de données? Est-il correct de mettre JavaScript dans les vues partielles JQuery show () vs ajout de classe Routeur ui angulaire – La redirection ne fonctionne pas du tout Comment diviser une cellule en 2 dans jqgrid? Quels sont les opérateurs Bitwise? Impression JavaScript bloquée par Chrome, solution de contournement? Une chaîne énorme est remplacée par JavaScript? Est-ce que les javascript améliorés améliorent les performances? Quelle sera une bonne méthode d'héritage Javascript? Uncaught IndexSizeError: Impossible d'exécuter 'getRangeAt' sur 'Selection': 0 n'est pas un index valide

Remplir un chemin SVG avec plusieurs couleurs

J'ai une carte des provinces d'un pays en tant que SVG, où chaque province est un chemin SVG. Le SVG actuel est la carte de province suivante.

Ce que j'aimerais faire, c'est remplir une partie de la province (le chemin) d'une seule couleur, une deuxième partie avec une autre et le reste avec une autre couleur. Donc, par exemple, j'avais 33,33% pour cent du chemin sur l'axe des x rempli de couleur a, de 33,33 à 66,66% avec la couleur b, et le reste avec la couleur c.

Est-ce possible? J'ai vu des gradients linéaires, mais plutôt qu'un gradient, je voudrais avoir des couleurs solides.

Merci!

Je pense que vous pourriez utiliser un gradient linéaire et utiliser deux arrêts de couleur pour chaque couleur unie. Quelque chose comme ça 

<svg height="200" width="600"> <defs> <linearGradient id="solids" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> <stop offset="33%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> <stop offset="33%" style="stop-color:rgb(0,255,0);stop-opacity:1" /> <stop offset="67%" style="stop-color:rgb(0,255,0);stop-opacity:1" /> <stop offset="67%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </linearGradient> </defs> <rect width="600" height="200" fill="url(#solids)" /> </svg>

Il n'est pas possible de le faire directement en général (les gradients et les filtres vous permettent de remplir un chemin avec des remplages très personnalisés, mais il peut être extrêmement difficile de calculer le bon gradient).

La façon la plus simple de le faire est de dessiner le chemin à plusieurs reprises, avec différentes couleurs et personnalisé-stroke-dash-array.