ändern Farbe svg Bild dieser Farbverlauf

Question

Änderung sein -> auf diese

Ich habe zu ändern, um die Farbe des Kreises zu sein Gradienten

<div class="loader loader--style3" title="2"> 
    <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="80px" height="80px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> 
    <path fill="#070e1a" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"> 
    <animateTransform attributeType="xml" 
     attributeName="transform" 
     type="rotate" 
     from="0 25 25" 
     to="360 25 25" 
     dur="0.6s" 
     repeatCount="indefinite"/> 
    </path> 
    </svg> 
</div> 

Answer 1

Ich denke, es auf die klar genug Tutorial, das @Harry vorher gepostet hat, aber ich aktualisiere deinen Code hier mit den angewendeten Stilen.

Fügen Sie einfach eine Definition Ihres linearen Farbverlaufs hinzu und nach der Referenz auf die fill Eigenschaft Ihres Kreises.

Ich weiß nicht, was genau die Farben sind, die Sie verwenden möchten, also ändern Sie einfach darkblue und lightblue der linearen Farbverlaufsdefinition zu Ihren benutzerdefinierten Farben.

<div class="loader loader--style3" title="2"> 
 
    <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    width="80px" height="80px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> 
 
    <defs> 
 
     <linearGradient id="customGradient"> 
 
      <stop offset="95%" stop-color="#123354"/> 
 
      <stop offset="5%" stop-color="#070f1c"/> 
 
     </linearGradient> 
 
    </defs> 
 
    
 
    <path fill="url(#customGradient)" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"> 
 
    <animateTransform attributeType="xml" 
 
     attributeName="transform" 
 
     type="rotate" 
 
     from="0 25 25" 
 
     to="360 25 25" 
 
     dur="0.6s" 
 
     repeatCount="indefinite"/> 
 
    </path> 
 
    </svg> 
 
</div>