论坛 › 马黑黑教程专版 › svg绘制花朵

马黑黑 发表于 2023-5-29 21:32

svg绘制花朵

<style>
.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>

<div class="papa">
        <p>代码：</p>
        <div class="mama">
                <pre class="hCode">&lt;style&gt;
        svg { background: #222; border-radius: 50%; }
&lt;/style&gt;

&lt;svg width="300" height="300" viewBox ="0 0 200 200"&gt;
        &lt;defs&gt;
                &lt;radialGradient id="flower"&gt;
                        &lt;stop offset="0%" stop-color="red" /&gt;
                        &lt;stop offset="20%" stop-color="orange" /&gt;
                        &lt;stop offset="25%" stop-color="lightblue" /&gt;
                &lt;/radialGradient&gt;
        &lt;/defs&gt;
        &lt;path d="M100 90
                A10 20 -30 1 0 91.5 95
                A10 20 -90 1 0 91.5 105
                A10 20 -150 1 0 100 110
                A10 20 150 1 0 108.5 105
                A10 20 90 1 0 108.5 95
                A10 20 30 1 0 100 90"
        fill="url(#flower)" /&gt;
&lt;/svg&gt;</pre>
                <pre class="hLineNum"></pre>
        </div>
        <p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
        <div class="stage"></div>
        <p>注：本例使用 path 路径完成。</p>
</div>

<script>

let btns = document.querySelectorAll('.btnok'),
        stages = document.querySelectorAll('.stage'),
        hCodes = document.querySelectorAll('.hCode'),
        hLineNums = document.querySelectorAll('.hLineNum'),
        mamas = document.querySelectorAll('.mama');

hCodes.forEach((item,key) => {
        let lines = hCodes.innerText.trim().split('\n').length;
        let str = '';
        for(let i = 0; i < lines; i ++) {
                str += i + 1 + '\n';
        }
        hLineNums.innerText = str;
        mamas.style.cssText += `height: ${hCodes.offsetHeight + 20}px`;
        if(!btns) return;
        btns.onclick = () => {
                let val = btns.value;
                val === '运行代码' ? codeRun(hCodes.innerText, stages) : codeRun('',stages);
                btns.value = btns.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
        };
});

let codeRun = (str,ele) => {
        let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
        let js_str, html_str;
        if(str.match(reg) !== null) {
                js_str = str.match(reg);
                html_str = str.replace(js_str, '').trim();
                js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
        } else {
                js_str = '';
                html_str = str.trim();
        }
        ele.innerHTML = html_str;
        let myfunc = new Function(js_str);
        myfunc();
};

</script>

醉美水芙蓉 发表于 2023-5-29 21:45

红影 发表于 2023-5-29 21:55

学习黑黑带来的新知识{:4_199:}

马黑黑 发表于 2023-5-29 22:35

醉美水芙蓉 发表于 2023-5-29 21:45
这个我不太懂，欣赏一下吧！

路径都是用数字说话，有点抽象

马黑黑 发表于 2023-5-29 22:35

红影 发表于 2023-5-29 21:55
学习黑黑带来的新知识

晚上嚎

红影 发表于 2023-5-30 11:08

马黑黑 发表于 2023-5-29 22:35
路径都是用数字说话，有点抽象

这个路径里加上了角度。

马黑黑 发表于 2023-5-30 12:03

本帖最后由 马黑黑 于 2023-5-30 12:04 编辑

红影 发表于 2023-5-30 11:08
这个路径里加上了角度。
只是A指令的组合。A指令的第三个参数与旋转角度有关。

南无月 发表于 2023-5-30 18:00

纯数字变花朵，神奇

马黑黑 发表于 2023-5-30 18:03

南无月 发表于 2023-5-30 18:00
纯数字变花朵，神奇

路径就是数字描述的。如果你愿意，你可以不用其他指令，全用数字来描述每一点的xy坐标，那样，路径数字会是很长很长的一串。

红影 发表于 2023-5-30 19:26

马黑黑 发表于 2023-5-30 12:03
只是A指令的组合。A指令的第三个参数与旋转角度有关。

是的，看惯了010之类的组合，看到角度还不太适应呢{:4_173:}

马黑黑 发表于 2023-5-30 19:28

红影 发表于 2023-5-30 19:26
是的，看惯了010之类的组合，看到角度还不太适应呢

0 1 0 的第一个 0 ，就是A指令的第三个参数，表示旋转角度，0 表明不旋转，30表示旋转30度。

南无月 发表于 2023-5-30 21:00

马黑黑 发表于 2023-5-30 18:03
路径就是数字描述的。如果你愿意，你可以不用其他指令，全用数字来描述每一点的xy坐标，那样，路径数字会 ...

这得达到老师的水平才能这么整

马黑黑 发表于 2023-5-30 21:20

南无月 发表于 2023-5-30 21:00
这得达到老师的水平才能这么整

还是用机器生成吧

南无月 发表于 2023-5-30 21:24

马黑黑 发表于 2023-5-30 21:20
还是用机器生成吧

{:4_170:}AI用起来呀

马黑黑 发表于 2023-5-30 21:25

南无月 发表于 2023-5-30 21:24
AI用起来呀

你的PS就能生成路径代码

红影 发表于 2023-5-30 21:55

马黑黑 发表于 2023-5-30 19:28
0 1 0 的第一个 0 ，就是A指令的第三个参数，表示旋转角度，0 表明不旋转，30表示旋转30度。

而且只要输入数字，不需要写单位呢。能这样写出6个花瓣，也很不容易的。

马黑黑 发表于 2023-5-30 22:17

红影 发表于 2023-5-30 21:55
而且只要输入数字，不需要写单位呢。能这样写出6个花瓣，也很不容易的。

如果你会PS，那么，你做一个图案，然后可以让PS为你生成路径代码

红影 发表于 2023-5-30 23:17

马黑黑 发表于 2023-5-30 22:17
如果你会PS，那么，你做一个图案，然后可以让PS为你生成路径代码

不会PS也行，网上有在线找路径的，更方便{:4_173:}

马黑黑 发表于 2023-5-30 23:20

红影 发表于 2023-5-30 23:17
不会PS也行，网上有在线找路径的，更方便

比如？

红影 发表于 2023-5-31 10:41

马黑黑 发表于 2023-5-30 23:20
比如？

某个SVG路径就直接能给出路径代码，不会PS也行啊。那个地址在家里电脑上收，这个电脑上没有{:4_173:}

查看完整版本: svg绘制花朵