SVG全体にグラデーションを適用する

Question

SVGホイールを回転させるものと線形グラデーションを描きたいものです。さらに、スピンしている間、ホイールは同じ場所（上）に勾配を持つ必要があります。私はそれを描きました：

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

しかし、グラデーションは数字で回転しています。

私はグループ要素と一桁としてグループ全体のグラデーションを適用することができます方法はありますか？

Answer 1

ここに私の解決策がありますが、それは簡単です。

私はホイールラインを持つ2つのグループを作成しました。それらのうちの1つは、私のグラデーションの私の希望する色の2番目の色を持ち、もう1つは白から黒のグラデーションでマスクされています。

次に、私は<animateTransform>でアニメーションしました。私の車輪が時計回りに回転している間、私の勾配は後方に回転しています。

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