在整個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

這是我的解決方案，但我相信有一個更容易。我創建了兩組帶輪線的組。其中一個具有我的漸變顏色的第二種顏色，另一個具有白色到黑色漸變的蒙版。

然後我用<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>