马黑黑 发表于 2024-11-24 13:11

svgdr教程·内部CSS

本帖最后由 马黑黑 于 2024-11-24 13:14 编辑 <br /><br /><style>
        .art p { margin: 12px 0; font: normal 18px/24px sans-serif; }
        .art mark { padding: 2px 6px; background: lightblue; }
        .art svg { outline: 1px solid silver; }
        .tRed { color: red; }
</style>

<div class="art">
        <h2>内部CSS</h2>
        <p>SVG内部可以拥有css代码，原理和HTML一致：css理论上可以放置在body标签内的任何地方，而不仅仅局限于&lt;header&gt;标签之内。一般来说，放在SVG内部的css主要作用于svg元素和子元素，不过它一样可以冒泡，这意味着svg内部的css同样可以作用于其外部的HTML元素。</p>
        <p>指令：<mark>css()</mark></p>
        <p>参数：<mark>csscode</mark></p>
        <p>语法：<mark>css(csscode)</mark></p>
        <p>参数说明：</p>
        <blockquote>
                ① csscode - 字符型，css代码，不包含&lt;style&gt;&lt;/style&gt;标签，svgdr会自动添上<br><br>
                * 若需要分行书写css代码，请使用反引号<mark>``</mark>将代码包裹起来
        </blockquote>
        <p>下例的演示：在svg内部建立CSS代码，用以驱动一系列小圆运行CSS关键帧动画。先看效果——</p>
        <svg id="msvg" width="800" height="400"></svg>
        <p>再看 svgdr 绘制代码：</p>
        <div id="div1"><pre id="pre1">
var all = 20;
Array.from({length: all}).forEach((c,k) => {
        var cx = k * 40 + 10,
                cy = 420,
                r = Math.random() * 2 + 8,
                color = '#' + Math.random().toString(16).substring(2,8),
                delay = Math.random() * -8 +'s',
                dur = Math.random() * 4 + 4 + 's';
        dr.circle(cx,cy,r,color).style(`--delay: ${delay}; --dur: ${dur};`);
});
dr.css(`
                circle { transform-box: fill-box; transform-origin: center; animation: up var(--dur) var(--delay) linear infinite, flash .75s var(--delay) infinite alternate; }
                @keyframes up { to { cy: -20; } }
                @keyframes flash { to { opacity: 0; } }
        `);
        </pre></div>
        <p>代码中，我们绘制了20个小圆，为了配套后续设计的动画，每一个小圆都加入行内style属性，用来为每一个小圆设置两个CSS变量。而后，使用 css() 指令创建svg内部 style 标签，里面是一些css代码，它设置了 circle 标签的一些CSS属性，还有两个关键动画选择器。这里需要留意一下，行内 style 属性和 svg 内部 style 标签是有区别的，行内 style 属性首先是作为一个标签的属性而存在，其次仅作用于该标签，而 svg 内部 style 标签则是独立的标签，它所创建的CSS样式理论上可以作用于DOM的所有节点，例如，下面这个 div 标签，它不隶属于 svg 的子元素，一样可以运行svg内部所设计的 flash 关键帧动画：</p>
        <div style="width: 20px; height: 20px; background: green; animation: flash .5s linear infinite;"></div>
        <p>上述svgdr绘制代码生成的SVG代码：</p>
        <div id="div2"><pre id="pre2"></pre></div>
        <p>将svg的内部CSS移到svg的外部，本讲小圆的动画效果并无二致，不过，若将SVG代码存为 .svg，则不能这么干。</p>
        <p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
        <!--p><a href="/art/bshow.php?st=7&sd=7&art=mahei_1730435960" targete="_blank">返回目录</a></p-->
</div>

<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

var dr = draw.dr('msvg');
var all = 20;
Array.from({length: all}).forEach((c,k) => {
        var cx = k * 40 + 10,
                cy = 420,
                r = Math.random() * 2 + 8,
                color = '#' + Math.random().toString(16).substring(2,8),
                delay = Math.random() * -8 +'s',
                dur = Math.random() * 4 + 4 + 's';
        dr.circle(cx,cy,r,color).style(`--delay: ${delay}; --dur: ${dur};`);
});
dr.css(`
                circle { transform-box: fill-box; transform-origin: center; animation: up var(--dur) var(--delay) linear infinite, flash .75s var(--delay) infinite alternate; }
                @keyframes up { to { cy: -20; } }
                @keyframes flash { to { opacity: 0; } }
        `);
pre2.textContent = dr.code(msvg);

hl.hl(div1, pre1);
hl.hl(div2, pre2);
</script>

梦江南 发表于 2024-11-24 13:47

听老师讲“svgdr教程·内部CSS”，辛苦了！{:4_190:}

红影 发表于 2024-11-24 15:35

20个小圆的平面位置均匀分布，半径和颜色是随机的，cy从420上升到-20，时间间隔和滞后也是随机的，还有明暗变化，让小球那么错落有致地运行，好看{:4_199:}

红影 发表于 2024-11-24 15:40

这个例子的前半部分就属于行内 style 吧，svgdr的内部css也很简洁方便呢{:4_187:}

马黑黑 发表于 2024-11-24 17:46

红影 发表于 2024-11-24 15:40
这个例子的前半部分就属于行内 style 吧，svgdr的内部css也很简洁方便呢

还好吧，本讲例子的另外的目的之一就是想也区别一下 style 属性和 style 标签

马黑黑 发表于 2024-11-24 17:47

红影 发表于 2024-11-24 15:35
20个小圆的平面位置均匀分布，半径和颜色是随机的，cy从420上升到-20，时间间隔和滞后也是随机的，还有明暗 ...

之前用过的，还是双向运行的

花飞飞 发表于 2024-11-24 17:47

继HTML之后，这样的css动画也可以在SVG里嵌入，这包容性简直绝了，无所不能的。。

花飞飞 发表于 2024-11-24 18:07

这串JS代码比较不那么陌生，之前粒子贴子里有出现过的。。

行内 style 属性和 svg 内部 style 标签是有区别的
刚试了一下，把这一对< style >移到SVG外部，动画也同样完美运行。。

闪动的小正方形虽然在外面，
< div style="width: 100px; height: 100px; background: green; animation: flash .5s linear infinite;">< /div>
同样继承了 flash动画效果。。

这么试了两次算是明白 “style 标签则是独立的标签，可以作用所有的节点”这句话的意思了。。{:4_173:}

马黑黑 发表于 2024-11-24 18:08

花飞飞 发表于 2024-11-24 17:47
继HTML之后，这样的css动画也可以在SVG里嵌入，这包容性简直绝了，无所不能的。。

嵌套到HTML里来的SVG代码，CSS放在哪里都可以，存为 .svg 文档时，放在svg里面才行。

另外，.svg 对CSS、JS交互是不认可的，例如CSS的 :hover 属性，JS设计的种种东东，等等。这些要起作用，必须是嵌入式的SVG代码而不是独立 .svg 文档。

马黑黑 发表于 2024-11-24 18:10

花飞飞 发表于 2024-11-24 18:07
这串JS代码比较不那么陌生，之前粒子贴子里有出现过的。。

行内 style 属性和 svg 内部 style 标签是有 ...

这个理解起来不是太难吧

花飞飞 发表于 2024-11-24 18:12

马黑黑 发表于 2024-11-24 18:08
嵌套到HTML里来的SVG代码，CSS放在哪里都可以，存为 .svg 文档时，放在svg里面才行。

另外，.svg 对CS ...

可以理解为:要存为SVG动画时，这些动画必须在内部，跟着一起包走，动画才能显现。。这点不能把人家整不见了。。

花飞飞 发表于 2024-11-24 18:26

马黑黑 发表于 2024-11-24 18:10
这个理解起来不是太难吧

小白开始的时候难的。。现在回头看看不难了{:4_173:}

马黑黑 发表于 2024-11-24 19:08

花飞飞 发表于 2024-11-24 18:26
小白开始的时候难的。。现在回头看看不难了

是的，有个过程

马黑黑 发表于 2024-11-24 19:13

花飞飞 发表于 2024-11-24 18:12
可以理解为:要存为SVG动画时，这些动画必须在内部，跟着一起包走，动画才能显现。。这点不能把人家整不见 ...

理解正确

红影 发表于 2024-11-24 20:04

马黑黑 发表于 2024-11-24 17:46
还好吧，本讲例子的另外的目的之一就是想也区别一下 style 属性和 style 标签

嗯嗯，两者还是有区别的，看到黑黑在帖子里特地强调了{:4_187:}

红影 发表于 2024-11-24 20:05

马黑黑 发表于 2024-11-24 17:47
之前用过的，还是双向运行的

是的，之前黑黑做过很多小球的呢{:4_173:}

马黑黑 发表于 2024-11-24 21:01

红影 发表于 2024-11-24 20:05
是的，之前黑黑做过很多小球的呢

特喜欢玩球{:4_189:}

马黑黑 发表于 2024-11-24 21:02

红影 发表于 2024-11-24 20:04
嗯嗯，两者还是有区别的，看到黑黑在帖子里特地强调了

{:4_199:}

小辣椒 发表于 2024-11-24 22:02

小辣椒就看看{:4_173:}

红影 发表于 2024-11-24 22:26

马黑黑 发表于 2024-11-24 21:01
特喜欢玩球

小球也是特别美的图形呢{:4_187:}
页: [1] 2
查看完整版本: svgdr教程·内部CSS