我需要Z
在 SVG 上为图标绘制一个字母。
<?xml version="1.0" encoding="iso-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 32 32">
<path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0
0 1 2-2z" fill="#e35604"></path>
<path d="БУКВА Z"></path>
</svg>
要获取此图标:
@Air 的答案是正确的、漂亮的,无论如何都会有用的。
但是,由于字符是
Z
用双轮廓绘制的,因此无法在线条的整个宽度上对字母的绘制进行动画处理。箭头显示节点。
要绘制单个轮廓,您需要在矢量编辑器中选择一个工具 -
Рисовать кривые Безье и прямые линии
-Shift+F6要从矢量编辑器保存的 SVG 文件中删除不必要的信息,您需要使用任何优化器优化文件,例如 - SVG EDITOR
如何使用优化器 -详细,并附有示例
其他优化器
在输出中,我们得到代码:
要使 SVG 具有响应性,必须将 SVG 画布的宽度和高度指定为百分比。
width="15%" height="15%"
大纲动画
"Z"
字母轮廓的总长度为
70px
画线动画是通过
stroke-dashoffset
从最大值变为零来实现的values="70;0"
绘图选项 - 来回
这是“手工”构建的基本内容 - 逐点:
d="M-12,-12 h23 L-12,12 h23"
所以 ?
更新
评论的补充说明
4个锚点就足以绘制
"Z"
但在这种情况下,不可能像提问者的样本那样进行垂直裁剪
所以我加了两个额外的点,将它们的类型更改为-
сделать выделенные узлы автоматически сглаженные
移动这些节点的控制杆实现了垂直切割