内部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，则不能这么干。

返回目录