如何使用笔触属性创建SVG?

时间:2015-11-24 22:23:01

标签: animation svg adobe-illustrator inkscape stroke

我一直在使用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代码。

我有几个问题,希望有些人可以提供帮助:

  1. 如何创建/导出包含stroke-widthstrokestroke-widthstroke-dasharray字段的SVG?这些参数似乎解锁了很多动画功能,我的路径似乎只有stroke-dashoffsetfill=''

  2. 一般来说,创建SVG的最佳工具是什么?似乎Inkscape导出了最干净的SVG代码,但它并不像Sketch和Illustrator那样容易操作。 Peter Collingridge的svg编辑器似乎是减少代码的最佳选择,但它并没有删除Sketch和Illustrator嵌入文件中的所有样式。

1 个答案:

答案 0 :(得分:-2)

您抱怨SVG包含“ d”操作。但是,这是一个强大的符号,可以吸引您的注意!您可以将其用作动画的开始。

想法:只需使用Inkscape。

输入您的文字。按照您希望其显示的方式进行设置。单击菜单>路径>对象到路径。这会将其从基于字体转换为基于矢量。

点击另存为...,然后选择纯SVG格式。