web-dev-qa-db-fra.com

Puis-je appliquer un dégradé le long d'un chemin SVG?

Je voudrais mettre un indicateur de chargement simple sur mon site qui est déclenché par un script. Ce devrait être un simple arc de cercle qui a un dégradé et tourne pendant que l'utilisateur attend. Je n'ai pas essayé la partie animation, mais je suis resté bloqué sur le style statique pour le moment. Voici ce que j'ai jusqu'à présent:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
    width="100" height="100">
    <defs>
        <linearGradient id="grad1">
            <stop offset="0%" stop-color="red"/>
            <stop offset="100%" stop-color="transparent"/>
        </linearGradient>
    </defs>
    <path d="M50 10  A40 40 0 1 0 90 50"
        stroke="url(#grad1)" stroke-width="10" fill="transparent"/>
</svg>

Il dessine l'arc, du bord supérieur dans le sens inverse des aiguilles d'une montre au bord droit (270 °), mais le dégradé est incorrect. Au lieu de suivre le tracé de sorte que le début (bord supérieur, 0 °) soit opaque et que la fin (bord droit, 270 °) soit transparente, l'image résultante du trait d'arc est colorée de gauche à droite dans l'espace écran.

Comment puis-je faire en sorte que le dégradé suive mon chemin d'arc?

svgpathgradient
51
ygoe

Mike Bostock a trouvé un moyen, bien que ce ne soit pas facile: https://bl.ocks.org/mbostock/4163057

Fondamentalement, cette technique utilise getPointAtLength pour découper le trait en plusieurs traits courts, spécifier des arrêts de couleur interpolés pour chacun, puis appliquer un dégradé à chaque trait court entre ces arrêts.

Bonne chance si vous êtes prêt à relever le défi;)

20
ericsoco

Ce type de gradient n’est pas facile à obtenir en SVG, voir Gradient angulaire SVG . 

De plus, transparent n'est pas une couleur valide en SVG. Vous devez indiquer stop-opacity comme dans cet exemple: http://jsfiddle.net/WF2CS/

Je crains que la solution la plus simple ne soit une série de petits chemins d’arc avec une opacité variable.

10
Duopixel

Une autre méthode consiste à créer deux demi-cercles et à appliquer le dégradé linéaire opposé à chaque trait et à vous assurer qu'ils sont tous deux contenus dans un élément g. (Dans mon exemple, le dégradé combiné n'est pas 270 degrés, mais 360. Deux demi-cercles sont empilés verticalement. Le premier dégradé (appliqué au trait du demi-cercle supérieur) correspond à une opacité de 100 à 50%, puis au suivant aurait 0. % à 50%. Le vecteur unitaire est défini sur x1, y1, y2 = 0 et x2 = 1 dans les deux gradients, ce qui les dirige de gauche à droite.

0
Andrew Levino