我一直在使用Illustrator,Sketch,Inkscape和Peter Collingridge svg-editor的组合来创建和操作SVG,但我遇到了一些问题。我正在尝试使用文本创建基本徽标,当徽标出现在页面上时,我想为外边框设置动画(使用drawing effect),然后用纯色填充中心。
在Illustrator和Sketch中,我首先使用基本文本框并将图层转换为轮廓,但我导出的SVG仅包含单个路径,而不包含stroke
和{{1} }字段。它看起来像这样:stroke-width
,在<path fill="#FFF" d="…"/>
字段中有很多标记。
我读了并学习了Inkscape导出一些最干净的SVG,因此导入了我的首字母缩写的PNG,“跟踪了一个位图图像”和每个this demo的“未分组图层”。这导出了一个多路径svg,但每个svg仍然缺少d=''
和stroke
参数。这是我到目前为止最接近动画的地方:codepen.io/pcooney10/pen/PPvGrx,它还包含实际的SVG代码。
我有几个问题,希望有些人可以提供帮助:
如何创建/导出包含stroke-width
,stroke
,stroke-width
和stroke-dasharray
字段的SVG?这些参数似乎解锁了很多动画功能,我的路径似乎只有stroke-dashoffset
和fill=''
。
一般来说,创建SVG的最佳工具是什么?似乎Inkscape导出了最干净的SVG代码,但它并不像Sketch和Illustrator那样容易操作。 Peter Collingridge的svg编辑器似乎是减少代码的最佳选择,但它并没有删除Sketch和Illustrator嵌入文件中的所有样式。
答案 0 :(得分:-2)
您抱怨SVG包含“ d”操作。但是,这是一个强大的符号,可以吸引您的注意!您可以将其用作动画的开始。
想法:只需使用Inkscape。
输入您的文字。按照您希望其显示的方式进行设置。单击菜单>路径>对象到路径。这会将其从基于字体转换为基于矢量。
点击另存为...,然后选择纯SVG格式。