论坛 › 马黑黑教程专版 › svg:简笔画猫头

马黑黑 发表于 2024-9-20 19:50

svg:简笔画猫头

<style>
#wrap { margin: 60px auto; width: fit-content; height: fit-content; }
#precode { background: #eee; padding: 2px 10px; font-size: 16px; white-space: pre-wrap; word-break: break-word; tab-size: 4; display: none; }
</style>

<div id="wrap">
<svg width="200" height="200" viewBox="-100 -100 200 200">
        <defs>
                <g id="face" fill="white" stroke="black">
                        <circle cx="0" cy="0" r="50" />
                </g>
                <g id="eye">
                        <circle cx="0" cy="0" r="5" fill="black" stroke="none" />
                </g>
                <g id="ear" stroke="black" fill="none">
                        <polyline points="-10 20,0 -20,10 20" />
                </g>
                <g id="nose" fill="black" stroke="none">
                        <ellipse cx="0" cy="0" rx="5" ry="8" />
                </g>
                <g id="mouse" stroke="black" fill="none">
                        <polyline points="-30 -3,-27 3,27 3,30 -3" />
                </g>
        </defs>

        <use x="-10" y="-65" href="#ear" />
        <use x="10" y="-65" href="#ear" />
        <use x="0" y="0" href="#face" />
        <use x="-15" y="-15" href="#eye" />
        <use x="15" y="-15" href="#eye" />
        <use x="0" y="0" href="#ear" transform="translate(-36) scale(1.5,0.8) rotate(90)" />
        <use x="0" y="0" href="#ear" transform="translate(36) scale(1.5,0.8) rotate(-90)" />
        <use x="0" y="0" href="#nose" />
        <use x="0" y="20" href="#mouse" />
</svg>
</div>
<p><button id="btnCode" type="button" value="btn">查看代码</button></p>
<p><pre id="precode"></pre></p>

<script>
btnCode.onclick = () => {
        precode.innerText = wrap.innerHTML;
        precode.style.display = 'inline-block';
        btnCode.disabled = true;
};
</script>

红影 发表于 2024-9-20 19:56

别说，还真挺像的呢，有趣{:4_187:}

红影 发表于 2024-9-20 20:03

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

马黑黑 发表于 2024-9-20 20:05

技法：

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

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

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

马黑黑 发表于 2024-9-20 20:05

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

这个看一下地板楼

红影 发表于 2024-9-20 20:10

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

红影 发表于 2024-9-20 20:15

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

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

红影 发表于 2024-9-20 20:15

完了，我抢楼了，不好意思{:4_173:}

马黑黑 发表于 2024-9-20 20:57

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

没事的

马黑黑 发表于 2024-9-20 20:59

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

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

花飞飞 发表于 2024-9-20 21:33

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

花飞飞 发表于 2024-9-20 21:44

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

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

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

花飞飞 发表于 2024-9-20 21:50

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

红影 发表于 2024-9-20 21:52

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

谢谢{:4_190:}

红影 发表于 2024-9-20 21:53

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

嗯嗯，看7楼，我看了地板的解说后已经明白了{:4_173:}

小辣椒 发表于 2024-9-20 22:48

这个代码编辑的真的是厉害了{:4_203:}

梦江南 发表于 2024-9-21 08:22

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

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

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

厉害

马黑黑 发表于 2024-9-21 11:47

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

也可以单独画的

红影 发表于 2024-9-21 15:13

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

我自己去做了一个，一会发出来{:4_173:}

查看完整版本: svg:简笔画猫头