论坛 › 马黑黑教程专版 › 在css-doodle中使用 svg

马黑黑 发表于 2023-6-1 07:32

在css-doodle中使用 svg

<style>
.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); 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>下面在一行两列的 css-doodle 图案里，我们采用两种方法分别在两个单元格中通过 @svg 函数使用 svg 绘制单元格背景——两个一模一样的圆。这两种方法，第一种是 HTML 方法，第二种是 CSS 方法：</p>
        <div class="mama">
                <pre class="hCode">&lt;css-doodle grid="2x1"&gt;
        :doodle { @size: 400px 200px; gap: 1px; }

        @nth(1) {
                background: #ddd @svg(
                        &lt;svg width="100%" height="100%"&gt;
                                &lt;circle cx="100" cy="100" r="80" fill="none" stroke="red" /&gt;
                        &lt;/svg&gt;
                );
        }
        @nth(2) {
                background: #eee @svg(
                        circle {
                                cx: 100;
                                cy: 100;
                                r: 80;
                                fill: none;
                                stroke: red;
                        }
                );
        }
&lt;/css-doodle&gt;</pre>
                <pre class="hLineNum"></pre>
        </div>
        <p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
        <div class="stage"></div>
        <p>所有的 svg 图案，基本都可以通过上述两种方法在 css-doodle 中使用。第一种方法更逼近原生 svg 但语句繁琐，第二种是封装成了 css-doodle 的 CSS 语句模式，直观但行数偏多。两种方法都能达到同样的目的。</p>
</div>

<script>

let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);

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

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

</script>

红影 发表于 2023-6-1 10:16

两种放一起看真好，可以便于比较了{:4_187:}

红影 发表于 2023-6-1 10:20

也就是 @svg 函数可以调用svg语句，也可以调用 CSS 语句吧。

梦缘 发表于 2023-6-1 15:45

感谢老师的代码分享，问好！{:4_190:}

南无月 发表于 2023-6-1 18:40

新课来了，先签个到

马黑黑 发表于 2023-6-1 22:06

南无月 发表于 2023-6-1 18:40
新课来了，先签个到

不懂svg，看这个会有点吃力

马黑黑 发表于 2023-6-1 22:08

红影 发表于 2023-6-1 10:20
也就是 @svg 函数可以调用svg语句，也可以调用 CSS 语句吧。

@svg 函数就是为了在css-doodle中使用 svg。svg有与 HTML 相同的写法，所以称为 HTML 方法；css-doodle 的语句是在 HTML 中使用 CSS 写法，故而 svg 在css-doodle中的写法自然也少不了 CSS 写法。

醉美水芙蓉 发表于 2023-6-1 22:20

马黑黑 发表于 2023-6-1 22:21

梦缘 发表于 2023-6-1 15:45
感谢老师的代码分享，问好！

{:4_190:}

马黑黑 发表于 2023-6-1 22:21

醉美水芙蓉 发表于 2023-6-1 22:20
不懂也要给老师点个赞！黑黑老师做贴辛苦了！

谢谢

红影 发表于 2023-6-2 12:41

马黑黑 发表于 2023-6-1 22:08
@svg 函数就是为了在css-doodle中使用 svg。svg有与 HTML 相同的写法，所以称为 HTML 方法；css-doodle...

这个解释非常清晰{:4_187:}

南无月 发表于 2023-6-2 21:45

马黑黑 发表于 2023-6-1 22:06
不懂svg，看这个会有点吃力

没事儿，我当学认字儿{:4_170:}

马黑黑 发表于 2023-6-2 22:34

南无月 发表于 2023-6-2 21:45
没事儿，我当学认字儿

也木有什么生僻字

马黑黑 发表于 2023-6-2 22:37

红影 发表于 2023-6-2 12:41
这个解释非常清晰

{:4_190:}

南无月 发表于 2023-6-3 08:49

马黑黑 发表于 2023-6-2 22:34
也木有什么生僻字

{:4_173:}生僻字查字典，这东东得耗时间

马黑黑 发表于 2023-6-3 12:27

南无月 发表于 2023-6-3 08:49
生僻字查字典，这东东得耗时间

时间又不缺一秒两秒的

查看完整版本: 在css-doodle中使用 svg