Ich habe ein SVG-Bild, das ich gerne von einer Blockfarbe in einen Farbverlauf umwandeln würde. Ich habe das funktioniert, aber ich würde gerne einen Übergang oder eine Animation haben. Ist das möglich - wenn ja, wie wäre es erreicht?
HTML:
%Vor%CSS:
%Vor%Irgendwelche Hinweise würden sehr geschätzt werden!
Setzen Sie die beiden Füllstile auf überlappende <rect> -Objekte und verwenden Sie das Uhrsymbol als Maskenobjekt, das auf beide <rect> -Objekte angewendet wird. Sie können dann den scheinbaren Füllstil animieren, indem Sie die Deckkraft des obersten <rect> animieren. Denken Sie daran, eine weiße Füllung auf das Maskenobjekt anzuwenden (weiß = undurchsichtig, schwarz = transparent).
Wenn das folgende Snippet nicht funktioniert, versuchen Sie diesen jsfiddle-Link .
Sie können vermeiden, zwei rects zu verwenden, indem Sie stattdessen stop-color s übergehen:
Hier ist eine Demo der Technik mit einer vereinfachten Form (keine Maske erforderlich).