Gradient auf das ganze anwenden SVG

Question

Ich möchte ein SVG-Rad zeichnen, was sich dreht und einen linearen Gradienten hat. Darüber hinaus sollte das Rad während des Drehens eine Steigung an der gleichen Stelle (oben) haben. Ich zeichnete es:

<svg width="950" class="wheel" height="950" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
      <linearGradient id="wheel" x1="0%" y1="0%" x2="0%" y2="50%" gradientUnits="userSpaceOnUse"> 
      <stop offset="0%" stop-color="#fff"/> 
      <stop offset="100%" stop-color="#bec7cf"/> 
     </linearGradient> 
    </defs> 
    <circle cx="475" cy="475" r="430" stroke="url(#wheel)" fill="url(#lines)" stroke-width="10"></circle> 
    <circle cx="475" cy="475" r="395" stroke="url(#wheel)" fill="transparent" stroke-width="10"></circle> 

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url(#wheel)" stroke-width="10"></line> 
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10"></line> 

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(30 475 475)"></line> 
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(30 475 475)"></line> 

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(60 475 475)"></line> 
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(60 475 475)"></line> 

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(90 475 475)"></line> 
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(90 475 475)"></line> 

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(120 475 475)"></line> 
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(120 475 475)"></line> 

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(150 475 475)"></line> 
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(150 475 475)"></line> 
</svg> 

Aber der Gradient dreht sich mit Zahlen.

Gibt es eine Möglichkeit kann ich Gruppenelemente und einen Gradienten auf die ganze Gruppe als eine Figur gelten?

Answer 1

Hier ist meine Lösung, aber ich glaube, es gibt einen leichter.

Ich habe zwei Gruppen mit Radlinien erstellt. Einer von ihnen hat eine zweite Farbe meiner gewünschten Farbe meines Gradienten, und ein anderer ist mit einem Weiß-zu-Schwarz-Verlauf maskiert.

Dann animierte ich es mit <animateTransform>. Während sich mein Rad im Uhrzeigersinn dreht, dreht sich mein Gradient rückwärts.

<svg width="950" class="wheel" height="950" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <linearGradient id="wheel" x1="0%" y1="0%" x2="0%" y2="50%" gradientUnits="userSpaceOnUse"> 
      <stop offset="0%" stop-color="#fff"/> 
      <stop offset="100%" stop-color="#bec7cf"/> 
     </linearGradient> 

     <linearGradient id="transwheel" x1="0%" y1="0%" x2="0%" y2="50%" gradientUnits="userSpaceOnUse"> 
      <stop offset="0%" stop-color="#fff"/> 
      <stop offset="100%" stop-color="#000"/> 
     </linearGradient> 
    </defs> 
    <circle cx="475" cy="475" r="430" stroke="url(#wheel)" fill="transparent" stroke-width="10"></circle> 
    <circle cx="475" cy="475" r="395" stroke="url(#wheel)" fill="transparent" stroke-width="10"></circle> 

    <mask id="clipping" maskUnits="userSpaceOnUse"> 
     <circle cx="475" cy="475" r="800" fill="white"></circle> 
     <circle cx="475" cy="475" r="70" fill="black"></circle> 
    </mask> 

    <mask id="gradient" maskUnits="userSpaceOnUse"> 
     <rect x="0" width="950" y="0" height="950" fill="url(#transwheel)" transform="rotate(0 475 475)"> 
      <animateTransform attributeName="transform" type="rotate" from="0 475 475" to="-30 475 475" dur="3s" repeatCount="1"></animateTransform> 
     </rect> 
    </mask> 

    <g> 
     <animateTransform attributeName="transform" type="rotate" from="0 475 475" to="30 475 475" dur="3s" repeatCount="1"></animateTransform> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(30 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(30 475 475)" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(60 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(60 475 475)" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(90 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(90 475 475)" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(120 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(120 475 475)" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(150 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(150 475 475)" mask="url(#clipping)"></line> 
    </g> 

    <g mask="url(#gradient)"> 
     <animateTransform attributeName="transform" type="rotate" from="0 475 475" to="30 475 475" dur="3s" repeatCount="1"></animateTransform> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(30 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(30 475 475)" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(60 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(60 475 475)" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(90 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(90 475 475)" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(120 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(120 475 475)" mask="url(#clipping)"></line> 

     <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(150 475 475)" mask="url(#clipping)"></line> 
     <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(150 475 475)" mask="url(#clipping)"></line> 
    </g> 
</svg>