svg创意图案：来自火星的礼物
本帖最后由 马黑黑 于 2024-10-3 13:23 编辑 <br /><br /><p id="code_box" style="text-align: center;"><style>
#path1 {
stroke: red;
stroke-width: 2;
fill: green;
fill-rule: evenodd;
transform-origin: 50%;
}
</style>
<svg id="svg1" width="200" height="200">
<defs>
<g id="path1">
<path d='M0 100 Q50 20,100 100 Q50 180,0 100 Q50 60,100 100 Q50 140,0 100' />
</g>
</defs>
</svg>
</p>
<p>代码：</p>
<div class="hE"><pre id="pre1"></pre></div>
<script>
mkLeaves = (total) => {
let str = '';
Array(total).fill().forEach((_,idx) => {
str += `\t<use href="#path1" transform="rotate(${360 / total * idx} 100 100)"/>\n`;
});
return str;
};
svg1.innerHTML += mkLeaves(5);
pre1.textContent = code_box.innerHTML;
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script> 挺漂亮的，但是花纹怎么会是绿色的？ 两端圆弧，组成了上下唇，然后转一下，组合起来就是这么奇妙。x上起点0，终点100，也正好是图形的中点，旋转不用另外设置，transform-origin: 50%;就好。上下也是对称的，20对应180 ，60对应140 ，漂亮的对称之美{:4_199:} 火星礼物，这个说法好玩。每个环之间好像环环相扣呢，取值很奇妙{:4_199:} 黑黑这么多图案的设计，就是让我们认识到svg图形的无限可能性吧，太赞了{:4_199:} 对称之美啊，有点古色古香的感觉。。古典图案。。 红配绿这色调也够大胆儿的。奇异的漂亮 花飞飞 发表于 2024-10-3 11:45
对称之美啊，有点古色古香的感觉。。古典图案。。
不是很先进的吗 愤怒的葡萄 发表于 2024-10-3 09:31
挺漂亮的，但是花纹怎么会是绿色的？
这个得用火星的思维去理解{:4_170:} 花飞飞 发表于 2024-10-3 11:46
红配绿这色调也够大胆儿的。奇异的漂亮
{:4_187:} 马黑黑 发表于 2024-10-3 11:46
不是很先进的吗
古典跟先进又不冲突。。都美得可以流芳千古。。 马黑黑 发表于 2024-10-3 11:47
这个得用火星的思维去理解
火星人思维是破常规的呀 花飞飞 发表于 2024-10-3 11:49
火星人思维是破常规的呀
必须的 花飞飞 发表于 2024-10-3 11:48
古典跟先进又不冲突。。都美得可以流芳千古。。
作古了阿 马黑黑 发表于 2024-10-3 11:47
这创新意识非同一般，时尚啊。。突然想到我那个小播应该用用白紫，火星人看肯定喜欢{:4_170:} 花飞飞 发表于 2024-10-3 11:50
这创新意识非同一般，时尚啊。。突然想到我那个小播应该用用白紫，火星人看肯定喜欢
应该是 马黑黑 发表于 2024-10-3 11:49
必须的
这创意都要挡不住了，冲破地球飞向宇宙的节奏{:4_170:} 花飞飞 发表于 2024-10-3 11:51
这创意都要挡不住了，冲破地球飞向宇宙的节奏
可以的 红影 发表于 2024-10-3 10:02
黑黑这么多图案的设计，就是让我们认识到svg图形的无限可能性吧，太赞了
谢赞 马黑黑 发表于 2024-10-3 11:50
作古了阿
扑通。。别瞎扯啊。。说看着美呢。