如何使用 stroke 属性创建 SVG？答案

【问题标题】：How to create SVG's with the stroke property?如何使用 stroke 属性创建 SVG？
【发布时间】：2019-01-31 01:06:12
【问题描述】：

我一直在使用 Illustrator、Sketch、Inkscape 和 Peter Collingridge 的 svg-editor 的组合来创建和操作 SVG，但我遇到了一些问题。我正在尝试使用文本创建一个基本徽标，当徽标出现在页面上时，我想为外部边框设置动画（使用drawing effect），然后用纯色填充中心。

在 Illustrator 和 Sketch 中，我从一个基本文本框开始并将图层转换为轮廓，但我导出的 SVG 仅包含一个单个路径，没有 stroke 和 stroke-width 字段。它看起来像这样：<path fill="#FFF" d="…"/>，d='' 字段中有很多标记。

我阅读并了解到 Inkscape 导出了一些最干净的 SVG，因此导入了我的首字母缩写的 PNG、“跟踪位图图像”和“未分组的图层”this demo。这导出了一个多路径 svg，但每个仍然缺少 stroke 和 stroke-width 参数。这是迄今为止我最接近的动画：codepen.io/pcooney10/pen/PPvGrx，它还包含实际的 SVG 代码。

我有几个问题，希望这里的一些人可以提供帮助：

如何创建/导出包含 stroke、stroke-width、stroke-dasharray 和 stroke-dashoffset 字段的 SVG？这些参数似乎解锁了很多动画功能，而我的路径似乎只有fill='' 和d=''。
一般来说，创建 SVG 的最佳工具是什么？ Inkscape 似乎导出了最干净的 SVG 代码，但它不像 Sketch 和 Illustrator 那样容易操作。 Peter Collingridge 的 svg 编辑器似乎是精简代码的最佳选择，但它并没有删除 Sketch 和 Illustrator 嵌入文件中的所有样式。

【问题讨论】：

这似乎不是编程问题，关于工具的建议在这里是题外话。
如果你投入垃圾，你就会得到垃圾。尝试用 inkscape 自己绘制形状（不要导入位图图像），或者最好自己编写 svg 代码。
在 Illustrator 中可以设置stroke、stroke-width 和stroke-dasharray，但不能设置stroke-dashoffset 参数。
谢谢@elchininet。在该笔触可以应用于任何填充对象之后实现 - 它只是在填充边框周围绘制一条线

标签： animation svg adobe-illustrator inkscape stroke

【解决方案1】：

您抱怨您的 SVG 包含“d”操作。但这是一个强大的符号，可以吸引你的字母！您可以将其用作动画的开始。

想法：只需使用 Inkscape。

输入您的文字。让它成为你希望它出现的方式。单击菜单 > 路径 > 对象到路径。这会将其从基于字体转换为基于矢量。

单击另存为...并选择纯 SVG 格式。

【讨论】：