svg:简笔画猫头

马黑黑

查看代码

红影

别说，还真挺像的呢，有趣

红影

原来是设定好元素，然后用use一点点分配这些元素啊。

马黑黑

技法：

（一）viewBox的设置，使得各元素可基于圆心坐标绘制，亦即，令元素在绘制时元素的中心点都基于 {0,0}；

（二）用defs标签包裹猫咪头的所有部件，分组（g）一一绘制，脸、眼睛、耳朵（胡须）、鼻子、嘴，都只画一个。其中，脸、眼睛是圆，耳朵（胡须）和嘴是折线、鼻子是椭圆；

（三）实例化（use）defs标签里的各组元素，先画耳朵，改变use标签的x和y就得到左右两只。再画脸，use标签xy都是0。这个次序是为了让脸挡住耳朵的根部线段、从而呈现出齐整的外观。然后画余下的，因为都在脸上布局，顺序不重要。值得注意的是胡须，跟耳朵用一个形状，通过形变（transform）安排它们的位置与尺寸。

马黑黑

红影 发表于 2024-9-20 20:03
原来是设定好元素，然后用use一点点分配这些元素啊。

这个看一下地板楼

红影

#ear这个没看懂，为什么设定后再设定呢？

红影

马黑黑 发表于 2024-9-20 20:05
这个看一下地板楼

知道了，原来胡须用了跟#ear同样名称的元素，我说怎么对耳朵设定了又设定

红影

完了，我抢楼了，不好意思

马黑黑

红影 发表于 2024-9-20 20:15
完了，我抢楼了，不好意思

没事的

马黑黑

红影 发表于 2024-9-20 20:10
#ear这个没看懂，为什么设定后再设定呢？

我不明白设定后再设定的意思。这是一个设计好的元素多次使用，每一次使用都要移位，可能还要旋转、拉伸

花飞飞

代码太强大了，它除了可以画出盛茶叶的簸箩，那些是有规律的线条
这样复杂的不规则的图案居然也能一笔一笔画出来。。
叹服一个。。

花飞飞

马黑黑 发表于 2024-9-20 20:05
技法：

（一）viewBox的设置，使得各元素可基于圆心坐标绘制，亦即，令元素在绘制时元素的中心点都基于  ...

代码画的圆，折线，椭圆这些基本形状，然后组合起来成一只小猫。。生了一只代码猫。
胡须跟耳朵是折线形状。。不说还真不知道。。
创意无限。。

花飞飞

接下来是不是可以让它胡须位置动一动，眼睛大小瞪一瞪，也变成动画

红影

马黑黑 发表于 2024-9-20 20:57
没事的

谢谢

红影

马黑黑 发表于 2024-9-20 20:59
我不明白设定后再设定的意思。这是一个设计好的元素多次使用，每一次使用都要移位，可能还要旋转、拉伸

嗯嗯，看7楼，我看了地板的解说后已经明白了

小辣椒

这个代码编辑的真的是厉害了

梦江南

老师早上好，这代码也能做表情包。这太厉害了！

马黑黑

红影 发表于 2024-9-20 21:53
嗯嗯，看7楼，我看了地板的解说后已经明白了

厉害

马黑黑

花飞飞 发表于 2024-9-20 21:44
代码画的圆，折线，椭圆这些基本形状，然后组合起来成一只小猫。。生了一只代码猫。
胡须跟耳朵是折线形 ...

也可以单独画的

红影

马黑黑 发表于 2024-9-21 11:46
厉害

我自己去做了一个，一会发出来