请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-11-24 13:14 编辑
内部CSS
SVG内部可以拥有css代码，原理和HTML一致：css理论上可以放置在body标签内的任何地方，而不仅仅局限于<header>标签之内。一般来说，放在SVG内部的css主要作用于svg元素和子元素，不过它一样可以冒泡，这意味着svg内部的css同样可以作用于其外部的HTML元素。
指令：css()
参数：csscode
语法：css(csscode)
参数说明：
① csscode - 字符型，css代码，不包含<style></style>标签，svgdr会自动添上
* 若需要分行书写css代码，请使用反引号``将代码包裹起来
下例的演示：在svg内部建立CSS代码，用以驱动一系列小圆运行CSS关键帧动画。先看效果——
再看 svgdr 绘制代码：
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; } }
`);
代码中，我们绘制了20个小圆，为了配套后续设计的动画，每一个小圆都加入行内style属性，用来为每一个小圆设置两个CSS变量。而后，使用 css() 指令创建svg内部 style 标签，里面是一些css代码，它设置了 circle 标签的一些CSS属性，还有两个关键动画选择器。这里需要留意一下，行内 style 属性和 svg 内部 style 标签是有区别的，行内 style 属性首先是作为一个标签的属性而存在，其次仅作用于该标签，而 svg 内部 style 标签则是独立的标签，它所创建的CSS样式理论上可以作用于DOM的所有节点，例如，下面这个 div 标签，它不隶属于 svg 的子元素，一样可以运行svg内部所设计的 flash 关键帧动画：
上述svgdr绘制代码生成的SVG代码：
将svg的内部CSS移到svg的外部，本讲小圆的动画效果并无二致，不过，若将SVG代码存为 .svg，则不能这么干。
返回目录
| 
发表于 2024-11-24 13:11
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-11-24 13:47
楼主
