主页 / 问题 / 1065806
Accepted
Gayrat Vlasov
Asked:2020-01-04 19:13:08 +0000 UTC2020-01-04 19:13:08 +0000 UTC

如何使svg中的渐变旋转平滑？

  • 772

有一个线性渐变的边界。我希望渐变旋转，即更改属性gradientTransform="rotate(40)"

文档说 gradientTransform 属性是“Animatable”

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientTransform

你能告诉我如何动画它吗？

我希望渐变从 0 度旋转到 360 度。 

 <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 240 120"  
>
     <defs>
      <linearGradient id="linearGradient"  gradientTransform="rotate(40)"  >
       <stop style="stop-color:violet; stop-opacity: .7;" offset="0%"/>
       <stop style="stop-color:blue; stop-opacity: .4;" offset="40%"/>
       <stop style="stop-color:orange" offset="90%"/>
      </linearGradient>
     </defs>

     <g >
       <rect x="5" y="5" width="230" height="110" ry="10" 
             style="fill:none;stroke-width:5;stroke:url(#linearGradient);" /> 

          <animateTransform 
          attributeName="gradientTransform" 
          type="rotate" 
          from="0"
          to="45"
          repeatCount="indefinite" 
          dur="25s" 
        />
      
     </g>
</svg>

svg

3 个回答

  1. Best Answer

    您正在将渐变旋转动画应用于矩形，并且您需要将渐变动画命令放置在渐变定义中。

    为了清楚起见，稍微改变了旋转的时间和角度。您可以随时为自己自定义这些设置。

    <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 240 120"  
>
     <defs>
      <linearGradient id="linearGradient"  gradientTransform="rotate(0)"  >
       <stop style="stop-color:violet; stop-opacity: .7;" offset="0%"/>
       <stop style="stop-color:blue; stop-opacity: .4;" offset="40%"/>
       <stop style="stop-color:orange" offset="90%"/>
          <animateTransform 
          attributeName="gradientTransform" 
          type="rotate" 
          values="0;90;90;0;0"
          repeatCount="indefinite" 
          dur="4s" 
        />
	  </linearGradient>
     </defs>

     <g >
       <rect x="5" y="5" width="230" height="110" ry="10" 
             style="fill:none;stroke-width:5;stroke:url(#linearGradient);" /> 
     </g>
</svg>

    • 7

  2. 所以我做到了——没有 animateTransform

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 120">
     <defs>
        <linearGradient id="g1" x1="0%" y1="50%" >
            <stop offset="0%" stop-color="red" >
                <animate id="a1" attributeName="stop-color" values="red; blue" begin="0; a2.end" dur="1s" />
                <animate id="a2" attributeName="stop-color" values="blue; red" begin="a1.end" dur="1s" />
            </stop>
            <stop offset="100%" stop-color="blue" >
                <animate id="a3" attributeName="stop-color" values="blue; red" begin="0; a4.end" dur="1s" />
                <animate id="a4" attributeName="stop-color" values="red; blue" begin="a3.end" dur="1s" />
            </stop>
        </linearGradient>
    </defs>
<rect x="5" y="5" width="230" height="110" ry="10" style="fill:none;stroke-width:5;stroke:url(#g1);" /> 
</svg>

    • 5

  3. 第一个答案使用渐变旋转动画命令得到渐变旋转效果

     <animateTransform 
          attributeName="gradientTransform" 
          type="rotate" 
          values="0;90;90;0;0"
          repeatCount="indefinite" 
          dur="4s" 
        />

    stop-color这里将使用线性渐变动画命令

    <stop style="stop-color:violet" offset="0">
   <animate attributeName="stop-color" dur="0.8s" values="violet;blue;violet" begin="rec.click" repeatCount="2" />
   </stop>

    下面是完整的代码：

    .container {
  width: 50%;
  height: 50%;
}
    <div class="container">
  <svg version="1.1" viewBox="0 0 237 113" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient" x1="-36" x2="200" y1="148" y2="148" gradientUnits="userSpaceOnUse">
   <stop style="stop-color:violet" offset="0">
   <animate attributeName="stop-color" dur="0.8s" values="violet;blue;violet" begin="rec.click" repeatCount="3" />
   </stop>
   <stop style="stop-color:blue" offset="0.8">
    <animate attributeName="stop-color" dur="1.0s" values="blue;orange;blue" begin="rec.click" repeatCount="3" />
   </stop>
   <stop style="stop-color:orange" offset="1">
    <animate attributeName="stop-color" dur="1.5s" values="orange;violet;orange" begin="rec.click" repeatCount="3" />
   </stop>
  
  </linearGradient>
 </defs>
 <g id="rec" transform="translate(36 -91)">
  <rect  x="-35" y="93" width="234" height="110" ry="18" style="fill:transparent;stroke-width:2;stroke:url(#linearGradient)"/>
   <text x="0" y="158" font-size="48" fill="url(#linearGradient)" >Click me</text>
 </g>
</svg>
</div>

    • 3

相关问题