svg 圆锥形褪色中风答案

【问题标题】：svg circle tapered fading strokesvg 圆锥形褪色中风
【发布时间】：2021-09-20 19:22:22
【问题描述】：

我正在尝试创建一个 svg 文件，其中的圆圈具有逐渐变淡的锥形笔触，这意味着笔触宽度将是原始颜色最厚的（比如 20 像素），而相反的则是最薄的（比如 3 像素）褪色的一侧。我能够使用渐变工具创建带有褪色的圆圈，但我正在努力弄清楚如何更改笔触宽度

这是我目前在 Photoshop 中创建并导出为 svg 的代码。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
  <defs>
    <style>
      .cls-1 {
        fill: none;
        stroke-width: 20px;
        stroke: url(#a);
      }
    </style>
    <linearGradient id="a" x1="255.5" y1="240" x2="255.5" y2="51" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="rgba(96,0,0,1)"/>
      <stop offset="1" stop-color="rgba(96,0,0,.1)"/>
    </linearGradient>
  </defs>
  <circle class="cls-1" cx="255.5" cy="255.5" r="184.5"/>
</svg>

这是我正在尝试做的图片。

对不起，再帮个忙。我正在尝试创建一个图标，因此它将有四个具有不同颜色的圆圈，如图所示，一个淡入顶部，另一个淡入底部，另外两个淡入两侧。如果你也能告诉我如何旋转，我将非常感激:)

提前谢谢你。

问候，

迈克

【问题讨论】：

标签： svg svg-animate

【解决方案1】：

我会画一个更大的圆圈，里面有一个洞。在这种情况下，我使用的是面具。您还可以绘制一个完整的路径。在这两种情况下，您都将渐变用作填充而不是描边

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
  <defs>
    <style>
      .cls-1 {
        fill: url(#a);
      }      
    </style>
    <linearGradient id="a" x1="255.5" y1="240" x2="255.5" y2="51" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="rgba(96,0,0,1)"/>
      <stop offset="1" stop-color="rgba(96,0,0,.1)"/>
    </linearGradient>
    <mask id="m">
      <circle id="c1" cx="255.5" cy="255.5" r="184.5" fill="white" />
      <circle fill="black" cx="255.5" cy="245.5" r="164.5"/>
    </mask>
  </defs>
  <circle  cx="255.5" cy="255.5" r="184.5" class="cls-1" mask="url(#m)" />  
</svg>

这是一个示例，我使用的是 holloed 路径而不是蒙面圆圈。请注意，在这种情况下，我将以点 x=0 y=0 为中心。

<svg width="500" height="500" viewBox="-250 -250 500 500">
  <defs>
    <style>
      .cls-1 {
        fill: url(#a);
      }    
    </style>
    <linearGradient id="a"  y1="200" y2="-200" x1="0" x2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="rgba(96,0,0,1)"/>
      <stop offset="1" stop-color="rgba(96,0,0,.1)"/>
    </linearGradient>    
  </defs> 
  <path class="cls-1" d="M184.5,0A184.5,184.5 0 0 1 -184.5,0A184.5,184.5 0 0 1 184.5,0M164.5,-10A164.5,164.5 0 0 0 -164.5,-10A164.5,164.5 0 0 0 164.5,-10"/>
</svg>

【讨论】：

【解决方案2】：

我正在尝试创建一个图标，所以它会有四个这样的圆圈有不同的颜色，如图所示，一种褪色到顶部，另一种褪色到底部，另外两个褪色到两侧。我将会如果你也能告诉我如何旋转，真的很感激

第一个圆顺时针旋转

<animateTransform 
  attributeName="transform" 
   type="rotate" 
    values="0 150 150;360 150 150" 
     begin="svg1.click" 
      dur="10s"
      repeatCount="indefinite" 
      />

第二个圆圈逆时针旋转。由于顶部圆圈设置为不透明度参数fill-opacity: 0.5; 然后创建改变笔画粗细的效果

为两个圆圈添加了渐变动画：

 <animate 
     attributeName="stop-color" 
     dur="1.5s" 
     values="red;yellow;red"
     repeatCount="indefinite" 
/>

已添加文本Click me 用于演示它可以删除。

下面是完整的代码：

.container {
width:50%;
height:50%;
}

svg {
background:black;
}

#path1 {
fill:url(#gradl);
stroke:none;
fill-opacity:1;
}
#path2 {
fill:url(#grad2);
stroke:none;
fill-opacity:0.5;
}
#crc1 {
stroke:none;
fill:black;
}
#txt1 {
fill:url(#grad2);

}

<div class="container">
 
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 300 300" > 
<defs>
<linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
    <stop offset="0%" stop-color="red" stop-opacity="0.9"> 
      <animate 
         attributeName="stop-color" 
         dur="1.5s" 
         values="red;yellow;red"
         repeatCount="indefinite" 
      />    
    </stop>          
      <stop offset="100%" stop-color="yellow">
       <animate  
         attributeName="stop-color" 
         dur="1.5s" 
         values="yellow;red;yellow" repeatCount="indefinite" 
         /> 
       </stop>                      
            
 </linearGradient> 
        
    <linearGradient id="grad2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="lime"> 
          <animate 
             attributeName="stop-color" 
             dur="1.5s" 
             values="lime;purple;lime"
             repeatCount="indefinite" 
           />   
        </stop>          
      <stop offset="100%" stop-color="purple">
       <animate  
         attributeName="stop-color" 
         dur="1.5s" 
         values="purple;lime;purple" repeatCount="indefinite" 
         /> 
       </stop>                      
        
    </linearGradient> 
        
</defs>
    <path id="path1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" > 
     <animateTransform 
      attributeName="transform" 
       type="rotate" 
        values="0 150 150;360 150 150" 
         begin="svg1.click" 
          dur="10s"
          repeatCount="indefinite" 
          /> 
    </path>

<path id="path2" transform="rotate(45 150 150)" 
  d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" >
 <animateTransform 
  attributeName="transform" 
   type="rotate" 
    values="360 148 148;0 148 148" 
    begin="svg1.click" 
     dur="10s"
     repeatCount="indefinite" />  
</path>
<circle id="crc1" cx="150" cy="150" r="90" /> 
 <text id="txt1" x="80" y="160" font-size="36" font-weight="700" > Click me </text>
</svg>  
</div>

【讨论】：