马黑黑 发表于 2024-11-16 20:52

这个貌似也不错

<p style="text-align: center;">
<svg id="msvg" width="300" height="300">
        <marker id="m1" markerWidth="5" markerHeight="5" refX="2.5" refY="2.5">
                <circle cx="2.5" cy="2.5" r="2.5" fill="tan"></circle>
        </marker>
        <path d="M150 150L290.00 150.00 Q150 150,257.25 239.99 L150 150L257.25 239.99 Q150 150,174.31 287.87 L150 150L174.31 287.87 Q150 150,80.00 271.24 L150 150L80.00 271.24 Q150 150,18.44 197.88 L150 150L18.44 197.88 Q150 150,18.44 102.12 L150 150L18.44 102.12 Q150 150,80.00 28.76 L150 150L80.00 28.76 Q150 150,174.31 12.13 L150 150L174.31 12.13 Q150 150,257.25 60.01 L150 150L257.25 60.01 Q150 150,290.00 150.00 L150 150L290.00 150.00 Q150 150,257.25 239.99 L150 150" fill="pink" stroke="tan" stroke-width="2" marker-mid="url(#m1)"></path>
</svg>
</p>
<p>SVG代码</p>
<div id="hEdiv1"><pre id="hEpre1">
&lt;svg id="msvg" width="300" height="300"&gt;
        &lt;marker id="m1" markerWidth="5" markerHeight="5" refX="2.5" refY="2.5"&gt;
                &lt;circle cx="2.5" cy="2.5" r="2.5" fill="tan"&gt;&lt;/circle&gt;
        &lt;/marker&gt;
        &lt;path d="M150 150L290.00 150.00 Q150 150,257.25 239.99 L150 150L257.25 239.99 Q150 150,174.31 287.87 L150 150L174.31 287.87 Q150 150,80.00 271.24 L150 150L80.00 271.24 Q150 150,18.44 197.88 L150 150L18.44 197.88 Q150 150,18.44 102.12 L150 150L18.44 102.12 Q150 150,80.00 28.76 L150 150L80.00 28.76 Q150 150,174.31 12.13 L150 150L174.31 12.13 Q150 150,257.25 60.01 L150 150L257.25 60.01 Q150 150,290.00 150.00 L150 150L290.00 150.00 Q150 150,257.25 239.99 L150 150" fill="pink" stroke="tan" stroke-width="2" marker-mid="url(#m1)"&gt;&lt;/path&gt;
&lt;/svg&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv1, hEpre1);
</script>

马黑黑 发表于 2024-11-16 20:55

<p>svg绘制代码（可到这里运行 <a href="http://mhh.52qingyin.cn/api/svgdr/tool/" target="_blank">svgdr online</a>）</p>
<div id="hEdiv2"><pre id="hEpre2">
var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M150 150';
for(var i = 0; i &lt;= tt; i ++) {
        var x1 = R + r * Math.cos(rad * i), x2 = R + r * Math.cos(rad * (i + 1)),
                y1 = R + r * Math.sin(rad * i), y2 = R + r * Math.sin(rad * (i + 1));
        pstr += `L${x1.toFixed(2)} ${y1.toFixed(2)} Q150 150,${x2.toFixed(2)} ${y2.toFixed(2)} L150 150`;
}
dr.marker('m1', 5, 5, 2.5, 2.5);
dr.circle(2.5,2.5,2.5,'tan').addTo('m1');
dr.path(pstr, 'pink', 'tan', 2).set('marker-mid', 'url(#m1)');
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv2, hEpre2);
</script>

泡沫 发表于 2024-11-16 21:02

本帖最后由 泡沫 于 2024-11-16 21:24 编辑 <br /><br />果然每天除了正片，还都有漂亮的花絮。。{:4_170:}这把伞可以合起来

<svg id="msvg" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
        <marker id="m2" markerWidth="5" markerHeight="5" refX="2.5" refY="2.5">
                <circle cx="2.5" cy="2.5" r="2.5" fill="tan"></circle>
        </marker>
        <path d="M150 150L90.00 50.00 Q150 150,82.36 73.51 L150 150L82.36 73.51 Q150 150,62.36 88.04 L150 150L62.36 88.04 Q150 150,37.64 88.04 L150 150L37.64 88.04 Q150 150,17.64 73.51 L150 150L17.64 73.51 Q150 150,10.00 50.00 L150 150L10.00 50.00 Q150 150,17.64 26.49 L150 150L17.64 26.49 Q150 150,37.64 11.96 L150 150L37.64 11.96 Q150 150,62.36 11.96 L150 150L62.36 11.96 Q150 150,82.36 26.49 L150 150L82.36 26.49 Q150 150,90.00 50.00 L150 150L90.00 50.00 Q150 150,82.36 73.51 L150 150" fill="pink" stroke="tan" stroke-width="2" marker-end="url(#m2)"></path>
</svg>

泡沫 发表于 2024-11-16 21:04

之前那个效果，中间没有伞骨，这里有伞骨。。
白老师又制作成数量可以变化，最喜欢这种灵活变化的小播了。。{:4_199:}

马黑黑 发表于 2024-11-16 21:15

泡沫 发表于 2024-11-16 21:04
之前那个效果，中间没有伞骨，这里有伞骨。。
白老师又制作成数量可以变化，最喜欢这种灵活变化的小播了。 ...

这个用路径实现

泡沫 发表于 2024-11-16 21:18

set('marker-mid', 'url(#m1)');
这个路径的标记mid，乍一看没太明白为什么是标记在连接点处，
现在明白应该是整个弧线为一条线，突出的部分就是连接点处用圆形标记，就出现以上效果了。
中间的圆是另外画上去的。。

泡沫 发表于 2024-11-16 21:26

马黑黑 发表于 2024-11-16 20:55
svg绘制代码（可到这里运行 svgdr online）

var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.P ...

这楼里的算法自动跳过。{:4_170:}

泡沫 发表于 2024-11-16 21:33

马黑黑 发表于 2024-11-16 21:15
这个用路径实现

看到了，还是生态路径，根据数量自动计算的{:4_173:}

马黑黑 发表于 2024-11-16 21:34

泡沫 发表于 2024-11-16 21:33
看到了，还是生态路径，根据数量自动计算的

其实万变不离其宗

马黑黑 发表于 2024-11-16 21:35

泡沫 发表于 2024-11-16 21:26
这楼里的算法自动跳过。

跳过就算不出了

泡沫 发表于 2024-11-16 21:38

马黑黑 发表于 2024-11-16 21:34
其实万变不离其宗

你看一眼板凳上合起来的那把伞呗{:4_170:}

泡沫 发表于 2024-11-16 21:38

马黑黑 发表于 2024-11-16 21:35
跳过就算不出了

算的烧脑的就算了{:4_173:}

马黑黑 发表于 2024-11-16 21:40

泡沫 发表于 2024-11-16 21:18
set('marker-mid', 'url(#m1)');
这个路径的标记mid，乍一看没太明白为什么是标记在连接点处，
现在明白 ...

marker标记，作用对象使用 marker-mid 的时候，在路径的任何一个连接点都产生作用。

这个路径是复合路径，每一个单元是酱紫：从svg中心点发起，画一条直线到 (x1, y1)，画一条二次贝塞尔曲线到   (x2, y2)，画一条直线到中心 (x, y)，因此每个个单元存在三个连接点，所以最终结果是，中心点也有标记。

红影 发表于 2024-11-16 21:42

这个和《什么花》的帖子取点有相似之处，然后用这些点构成的路径方式不同，得到的效果就不一样，都很漂亮{:4_199:}

马黑黑 发表于 2024-11-16 21:42

泡沫 发表于 2024-11-16 21:38
你看一眼板凳上合起来的那把伞呗

看到了。雨停了可以收起来了

马黑黑 发表于 2024-11-16 21:43

红影 发表于 2024-11-16 21:42
这个和《什么花》的帖子取点有相似之处，然后用这些点构成的路径方式不同，得到的效果就不一样，都很漂亮{: ...

是的，计算点坐标的方式一样

红影 发表于 2024-11-16 21:46

这个真的很漂亮，黑黑的配色很协调{:4_187:}

泡沫 发表于 2024-11-16 21:50

马黑黑 发表于 2024-11-16 21:40
marker标记，作用对象使用 marker-mid 的时候，在路径的任何一个连接点都产生作用。

这个路径是复合路 ...

我理解错了，
原来直线曲线连在一起画的。。。中心点也是标记。。不是另外画的。。
那更是复杂了。{:4_174:}
神算子。。白大神

泡沫 发表于 2024-11-16 21:50

马黑黑 发表于 2024-11-16 21:42
看到了。雨停了可以收起来了

{:4_172:}很有故事感

马黑黑 发表于 2024-11-16 22:40

泡沫 发表于 2024-11-16 21:50
很有故事感

这个可以有
页: [1] 2
查看完整版本: 这个貌似也不错