software - ¿Puedo aplicar un degradado a lo largo de una ruta SVG?

inkscape rar

Question

Me gustaría poner un indicador de carga simple en mi sitio web que se desencadena por un script. Debería ser un arco circular simple que tiene un gradiente y está girando mientras el usuario está esperando. No he probado la parte de la animación, pero me quedé atrapado en el estilo estático por ahora. Esto es lo que tengo hasta ahora:

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

Dibuja el arco, desde el borde superior en sentido antihorario hasta el borde derecho (270 °), pero el gradiente es incorrecto. En lugar de seguir la ruta de modo que el comienzo (borde superior, 0 °) sea opaco y el extremo (borde derecho, 270 °) transparente, la imagen resultante de la carrera del arco se colorea de izquierda a derecha en el espacio de la pantalla.

¿Cómo puedo hacer que el degradado siga mi trayectoria de arco?

Answer 1

Este tipo de gradiente no es fácil de lograr en SVG, ver gradiente angular SVG .

Además, transparent no es un color válido en SVG. Debería indicar stop-opacity como en este ejemplo: http://jsfiddle.net/WF2CS/

Me temo que la solución más fácil podría ser una serie de pequeños caminos de arco con opacidad variable.

Answer 2

Lamento haber llegado tan tarde aquí, esto podría ser útil para alguien, lo obtuve de https://github.com/ryanallen/articles/blob/master/img/svg/svg-loading-icon.svg

<svg version="1.1" id="svg-loading-1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px"
     viewBox="0 0 80 80" 
     xml:space="preserve">
    <path
        id="loading-spinner" 
        fill="#338833" 
        d="M 40,72
        C 22.4,72,8,57.6,8,40
        C 8,22.4,22.4,8,40,8
        c 17.6,0,32,14.4,32,32
        c 0,1.1-0.9,2-2,2
        s -2-0.9-2-2
        c 0-15.4-12.6-28-28-28
        S 12,24.6,12,40
        s 12.6,28,28,28
        c 1.1,0,2,0.9,2,2
        S 41.1,72,40,72 z"
    >
        <animateTransform
            attributeType="xml"
            attributeName="transform"
            type="rotate"
            from="0 40 40"
            to="360 40 40"
            dur="1.5s"
            repeatCount="indefinite"
        />
    </path>
</svg>

Answer 3

Mike Bostock descubrió una manera, aunque no es fácil: https://bl.ocks.org/mbostock/4163057

Básicamente, esta técnica usa getPointAtLength para getPointAtLength el trazo en muchos trazos cortos, especificar paradas de color interpoladas para cada una, y luego aplicar un degradado a cada trazo corto entre esas paradas.

Buena suerte si estás preparado para el desafío;)

Answer 4

Otra forma es hacer dos medios círculos y aplicar el gradiente lineal opuesto al trazo de cada uno, y asegurarse de que ambos estén contenidos en el elemento ag. (En mi ejemplo, el gradiente combinado no es 270 grados sino 360. Dos semicírculos se apilan verticalmente. El primer degradado (aplicado al trazo del semicírculo superior) sería 100-50% de opacidad, luego el siguiente tendría 0 % a 50%. Ambos degradados tienen el vector de unidad establecido en x1, y1, y2 = 0 y x2 = 1, haciéndolos correr de izquierda a derecha). Luego aplique transform = rotate (deg, ctrX, ctrY) al g.