svg 圆锥形褪色描边

Question

我正在尝试创建一个 svg 文件，该文件带有一个带有渐变的锥形笔划的圆圈，这意味着笔划宽度将是原始颜色的最粗（比如 20px），并且最细（比如 3px）颜色已经褪色的反面。我能够使用渐变工具创建颜色渐变的圆圈，但我正在努力弄清楚如何更改笔划宽度

这是我目前的代码，我在 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>

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

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

提前致谢。

此致，

麦克

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

这是我使用空心路径而不是蒙版圆的示例。请注意，在这种情况下，我将路径集中在点 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>

Answer 2

I am trying to create an icon, so it will have four of these circles with different colors, with one fading to the top as shown, another fading to the bottom, and the other two to each of the sides. I will really appreciate it if you can also show me how to rotate

第一圈顺时针旋转

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

svg 圆锥形褪色描边

svg circle tapered fading stroke

svg

svg-animate