小播预告

马黑黑

刚刚设计好

<svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"> <defs id="defs"> <linearGradient id="grd" x1="0" x2="0" y1="0" y2="0.75"> <stop stop-color="red" offset="0"></stop> <stop stop-color="gold" offset="0.5"></stop> <stop stop-color="darkred" offset="1"></stop> </linearGradient> <path d="M-150 -50 Q0 -200,150 -50" id="txtpath"></path> </defs> <path d="M-120 -50 C-240 220,240 220,120 -50" fill="none" stroke="url(#grd)" stroke-width="6"></path> <ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6"></ellipse> <ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6" transform="rotate(72.00, 0 0)"></ellipse> <ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6" transform="rotate(144.00, 0 0)"></ellipse> <ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6" transform="rotate(216.00, 0 0)"></ellipse> <ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6" transform="rotate(288.00, 0 0)"></ellipse> <text x="0" y="0" fill="url(#grd)" style="font: bold 2.6em sans-serif; letter-spacing: 4px; text-anchor: middle;"> <textPath href="#txtpath" startOffset="50%">歌曲标题</textPath> </text> </svg>

马黑黑

使用 svgdr 小工具绘制的代码：

1. dr.setsvg({width: 400, height: 400, viewBox: '-200 -200 400 400'});
   
2. dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['gold',0.5],['darkred',1]]);
   
3. const d = 'M-120 -50 C-240 220,240 220,120 -50'; // M-190 50 Q-150 -80,-70 130 T200 -120
   
4. dr.path(d, 'none', 'url(#grd)', 6);
   
5. dr.ellipse(0, 0, 100, 20, 'transparent', 'url(#grd)', 6).rotates(5);
   
6. dr.path('M-150 -50 Q0 -200,150 -50').set('id','txtpath').addTo('defs');
   
7. dr.text('歌曲标题', 0, 0, 'url(#grd)').style('font: bold 2.6em sans-serif; letter-spacing: 4px; text-anchor: middle;').textPath('txtpath','50%');

复制代码

红影

这个形状漂亮，而且还带标题文字的。这个好

马黑黑

红影 发表于 2025-9-29 23:31
这个形状漂亮，而且还带标题文字的。这个好

有文字你就两眼发光，文人的特征

杨帆

设计精美，图文并茂，效果惊艳，谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-9-30 00:37
设计精美，图文并茂，效果惊艳，谢谢马老师精彩分享