在css-doodle中使用 svg

马黑黑

下面在一行两列的 css-doodle 图案里，我们采用两种方法分别在两个单元格中通过 @svg 函数使用 svg 绘制单元格背景——两个一模一样的圆。这两种方法，第一种是 HTML 方法，第二种是 CSS 方法：

<css-doodle grid="2x1">
	:doodle { @size: 400px 200px; gap: 1px; }

	@nth(1) {
		background: #ddd @svg(
			<svg width="100%" height="100%">
				<circle cx="100" cy="100" r="80" fill="none" stroke="red" />
			</svg>
		);
	}
	@nth(2) {
		background: #eee @svg(
			circle {
				cx: 100;
				cy: 100;
				r: 80;
				fill: none;
				stroke: red;
			}
		);
	}
</css-doodle>

运行代码

所有的 svg 图案，基本都可以通过上述两种方法在 css-doodle 中使用。第一种方法更逼近原生 svg 但语句繁琐，第二种是封装成了 css-doodle 的 CSS 语句模式，直观但行数偏多。两种方法都能达到同样的目的。

红影

两种放一起看真好，可以便于比较了

红影

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

梦缘

感谢老师的代码分享，问好！

南无月

新课来了，先签个到

马黑黑

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

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

马黑黑

红影 发表于 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 15:45
感谢老师的代码分享，问好！

马黑黑

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

谢谢

红影

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

这个解释非常清晰

南无月

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

没事儿，我当学认字儿

马黑黑

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

也木有什么生僻字

马黑黑

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

南无月

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

生僻字查字典，这东东得耗时间

马黑黑

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

时间又不缺一秒两秒的