html 怎么让div和div中svg的高度一样_用SVG教你画宇智波鼬的万花筒写轮眼

不知道大家有没有看过火影忍者这部动漫。相信即使没有看过的小伙伴们也都听说过宇智波一族的写轮眼。在动漫中相比拥有主角光环但是脑回路奇葩的“二柱子”，我更欣赏宇智波鼬。

如果说火影中奈良鹿丸是战术大师，那鼬一定就是最强预言家，他的大局观在岸本笔下体现的淋漓尽致：自己背上灭族叛忍的骂名，孤身潜入晓组织暗中保护村子，为的就是给弟弟佐助铺好了一条复兴家族、保护村子的英雄之路，只可惜“二柱子”没脑子。为了让佐助开启万花筒写轮眼，不惜死在弟弟手下，在自己死前将自己的天照留给佐助，将止水的别天神留给鸣人，忍界大战击败兜这些都为村子甚至是忍界作出了巨大贡献。

岸本用“忍者，是在黑暗中支撑和平的无名者”来形容忍者，正如鼬即使背上叛忍骂名后仍然说自己是木叶村忍者的宇智波鼬，所做的一切也都是为了保护村子。

说的有点多了接下来我们就看一下鼬神的万花筒写轮眼如何用代码来画。

首先我们先了解一下今天主要用到的技术：SVG

SVG 意为可缩放矢量图形(Scalable Vector Graphics)

何为矢量图，也就是无论如何放大或缩小都不会影响图片的质量也就是俗称的失真。

先说一下SVG的基本用法。相比UI设计师使用专业软件设计后生成的SVG图片不同，我们这里完全是通过代码来实现的。

构造：SVG图片顾名思义文件以.svg拓展名结尾。文件内容由标签括起来。

"http://www.w3.org/2000/svg" xmlns:xlink=svg>

这样就定义了一个svg的文件，就如同是html文件的html标签一样

然后我们设置一下这个图片文件的大小(这里说的大小只是说在编辑时展示的默认大小，你依然可以通过画布放大或者比例放大的方式改变图片的大小而不失真)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800">svg>

然后我们先看一下鼬神的万花图写轮眼是什么样子的

这个图给我我是怎么分析的呢，首先他有两个圆(或者说圆环)组成，然后由一个三等分的不规则图案填充在里面，中间又是一个空心的圆，不规则图案和外面的两个圆环都是黑色背景，其他背景为暗红色。

这样我们就可以开始动手画了

我们先画两个圆

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800"><circle cx="400" cy="400" r="280" fill="hsla(356, 100%, 41%, 1)" stroke="black" stroke-width="10">circle><circle cx="400" cy="400" r="200" fill="hsla(356, 100%, 41%, 1)" stroke="black" stroke-width="5">circle>svg>

标签为圆形标签

cx、cy分别为圆心坐标属性

r为半径

fill为填充颜色属性

stroke为线条颜色属性

stroke-width为线条粗细属性

然后我们看一下效果，用浏览器就可以直接打开svg文件调试

现在眼睛的轮廓有了，下面就是画瞳体的过程了。

瞳体由于是不规则图形所以我们需要用到轨迹标签

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800"><defs><g id="xly"><path d="M400 125A 150 150 0 0 0 320 370L 335 375A 70 70 0 0 1 455 355L475 345C 400 330 320 170 400 125" stroke="black"/>g>defs><circle cx="400" cy="400" r="280" fill="hsla(356, 100%, 41%, 1)" stroke="black" stroke-width="10">circle><circle cx="400" cy="400" r="200" fill="hsla(356, 100%, 41%, 1)" stroke="black" stroke-width="5">circle><circle cx="400" cy="400" r="70" fill="hsla(356, 100%, 41%, 1)" stroke="black" stroke-width="5">circle><g id="dou" ><use xlink:href="#xly" />g>svg>

因为这里瞳孔中心是一个小圆所以我们再画一个小圆，然后因为瞳体是由三个等分的图形组合的所以我们用轨迹标签将其中一个瞳体部分画出，效果如下：

这里我简单解释一下一些标签的用法，如果解释的不够详细，如果感兴趣的小伙伴可以自学一下svg的语法。

为轨迹标签，顾名思义就是像我们用笔在纸上随意绘画一样。

d属性为轨迹属性

M为落笔移动点：以画布最坐上放坐标为(0，0)坐标分别向下为y轴正方向向右为x轴正方向，代码中M400 125就相当于我们将落笔点移到了画布坐标为(400，125)

A为圆弧、L为直线、C为贝塞尔曲线(这里这些专业用法由于篇幅过长下期详细解释一下)

然后我们复制这个部分分别旋转120度、240度即可得到另两部分瞳体。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800"><defs><g id="xly"><path d="M400 125A 150 150 0 0 0 320 370L 335 375A 70 70 0 0 1 455 355L475 345C 400 330 320 170 400 125" stroke="black"/>g>defs><circle cx="400" cy="400" r="280" fill="hsla(356, 100%, 41%, 1)" stroke="black" stroke-width="10">circle><circle cx="400" cy="400" r="200" fill="hsla(356, 100%, 41%, 1)" stroke="black" stroke-width="5">circle><circle cx="400" cy="400" r="70" fill="hsla(356, 100%, 41%, 1)" stroke="black" stroke-width="5">circle><g id="dou" ><use xlink:href="#xly" /><use xlink:href="#xly" transform="translate(947,251) rotate(120)" /><use xlink:href="#xly" transform="translate(255,945) rotate(240)" />g>svg>

看一下效果：

这样整个眼睛就绘制完成了，是不是很简单。

如果到了这里你就觉得结束了那就错了，写轮眼不动你怎么能中幻术呢？

接下来我们让他动起来

在眼睛分组标签中添加动画标签属性，如下面的代码：

    attributeType="XML"    attributeName="transform"    begin="0s"    type="rotate"    from="0 400 400"    to="360 400 400"    dur="3s"    repeatCount="indefinite"    >animateTransform>

我们看一下效果

这样整个宇智波鼬万花筒写轮眼的svg就全部完成了。

通过这种方式你可以绘制很多较为简单的矢量图

例如这些：

还有很多很多就要看你的想象力和创造力了。

怎么样是不是很有趣，没有用任何PS工具和画图板工具完全用代码来绘制的图片而且还是矢量图还能动。

你也快来动手用代码绘制一个你自己喜欢的SVG吧！

扫码关注或打开微信公众号搜索“二进制艺术”！感谢订阅！

【原创，转载请注明来源，作者】