Heim > Fragen und Antworten > Hauptteil
P粉9086436112023-08-30 07:47:05
在SVG中,您可以使用<linearGradient>
和<radialGradient>
。您正在创建一个进度条,所以根据布局,径向渐变可能是创建“锥形渐变”(加引号!)的选项,但是使用起来真的很烦人。
一个很好的替代内置渐变的方法可能是结合SVG和CSS。您可以将CSS样式应用于嵌入的SVG元素。只要您只需要一个可应用于SVG元素的锥形渐变,然后进行遮罩,以便它只显示在描边或其他地方。这是一个示例:
svg { display: block; background-image: conic-gradient(from 180deg, green, orange, red); }
<svg width="300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <defs> <mask id="m1"> <rect width="100" height="100" fill="white" /> <circle transform="rotate(120 50 50)" cx="50" cy="50" r="45" stroke="black" stroke-width="5" fill="none" stroke-dasharray="300 360" pathLength="360" /> </mask> </defs> <rect width="100" height="100" fill="white" mask="url(#m1)" /> </svg>