马黑黑 发表于 2025-9-29 22:42

小播预告

本帖最后由 马黑黑 于 2025-9-29 22:44 编辑 <br /><br /><h3>刚刚设计好</h3>
<div class="codebox" data-prev="1">
&lt;svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"&gt;
        &lt;defs id="defs"&gt;
                &lt;linearGradient id="grd" x1="0" x2="0" y1="0" y2="0.75"&gt;
                        &lt;stop stop-color="red" offset="0"&gt;&lt;/stop&gt;
                        &lt;stop stop-color="gold" offset="0.5"&gt;&lt;/stop&gt;
                        &lt;stop stop-color="darkred" offset="1"&gt;&lt;/stop&gt;
                &lt;/linearGradient&gt;
                &lt;path d="M-150 -50 Q0 -200,150 -50" id="txtpath"&gt;&lt;/path&gt;
        &lt;/defs&gt;
        &lt;path d="M-120 -50 C-240 220,240 220,120 -50" fill="none" stroke="url(#grd)" stroke-width="6"&gt;&lt;/path&gt;
        &lt;ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6"&gt;&lt;/ellipse&gt;
        &lt;ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6" transform="rotate(72.00, 0 0)"&gt;&lt;/ellipse&gt;
        &lt;ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6" transform="rotate(144.00, 0 0)"&gt;&lt;/ellipse&gt;
        &lt;ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6" transform="rotate(216.00, 0 0)"&gt;&lt;/ellipse&gt;
        &lt;ellipse cx="0" cy="0" rx="100" ry="20" fill="transparent" stroke="url(#grd)" stroke-width="6" transform="rotate(288.00, 0 0)"&gt;&lt;/ellipse&gt;
        &lt;text x="0" y="0" fill="url(#grd)" style="font: bold 2.6em sans-serif; letter-spacing: 4px; text-anchor: middle;"&gt;
                &lt;textPath href="#txtpath" startOffset="50%"&gt;歌曲标题&lt;/textPath&gt;
        &lt;/text&gt;
&lt;/svg&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-9-29 22:46

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

dr.setsvg({width: 400, height: 400, viewBox: '-200 -200 400 400'});
dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['gold',0.5],['darkred',1]]);
const d = 'M-120 -50 C-240 220,240 220,120 -50'; // M-190 50 Q-150 -80,-70 130 T200 -120
dr.path(d, 'none', 'url(#grd)', 6);
dr.ellipse(0, 0, 100, 20, 'transparent', 'url(#grd)', 6).rotates(5);
dr.path('M-150 -50 Q0 -200,150 -50').set('id','txtpath').addTo('defs');
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

这个形状漂亮，而且还带标题文字的。这个好{:4_199:}

马黑黑 发表于 2025-9-29 23:39

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

有文字你就两眼发光，文人的特征{:4_170:}

杨帆 发表于 2025-9-30 00:37

本帖最后由 杨帆 于 2025-9-30 00:42 编辑

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

马黑黑 发表于 2025-9-30 12:09

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

{:4_190:}
页: [1]
查看完整版本: 小播预告