如何获得正确的SVG代码

Question

我一直在尝试创建一些SVG绘图动画，比如：SVG animation

然而，我遇到的问题是如何获得适当的SVG代码。假设我有一个png绘图，我想将其转换为SVG。当我使用Inkscape时，我得到了这样的东西，它是无用的。

xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcG

像这样的在线工具：SVG converter稍微好一点，因为它们输出的内容如下：

path d="M3875 6730 c-38 -7 -902 -134 -1130 -166 -22 -3 -51 -7 -65 -9 -14

我以为它会起作用，但我错了。它不会动起来。如何在这些examples中获得正确的SVG代码？

Answer 1

您可能首先了解svg是如何工作的。然后您就会明白，将PNG转换为SVG并非易事。

无论如何，如果你有一个真正的SVG (你已经用<path>提到过一些东西)，你可以将它动画化。

绘制您的SVG

首先，您需要一个SVG。这里有一个简单的路径，画一个十字正方形：

​

<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill: none; stroke: black">
  <path d="M 10,10 l 100,0 l 0,100 l -100,0 l 0,-100 l 100,100 M 110,10 l -100,100" />
</svg>

​

为其设置动画

要使路径具有动画效果，我们将结合使用两个属性：

• stroke-dasharray：使我们的路径变得虚线，并定义了虚线和whitespaces
• stroke-dashoffset：的宽度来偏移我们的path

基本上，我们会创建一个和我们的路径一样长(甚至更长)的虚线，并添加一个高偏移量来使其不可见。然后我们将动画这个偏移量，使其逐渐可见：

​

​

​

svg {
  stroke-dasharray: 1000px;
  stroke-dashoffset: 1000px;
  -webkit-animation: draw 5s;
  animation: draw 5s;
}

@-webkit-keyframes draw {
  from { stroke-dashoffset: 1000px; } 
  to   { stroke-dashoffset: 0px; } 
}
@keyframes draw {
  from { stroke-dashoffset: 1000px; } 
  to   { stroke-dashoffset: 0px; } 
}

<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill: none; stroke: black">
  <path d="M 10,10 l 100,0 l 0,100 l -100,0 l 0,-100 l 100,100 l 0,-100 l -100,100" />
</svg>

​

Answer 2

做svg的正确方法是使用Adobe Illustrator。在那里，您可以使用正确的svg代码保存svg文件。

Answer 3

在我的网站www.stretchsketch.com上，您可以查看多个可定制的svg模型。这些模型中的大多数都是使用iPath创建的，这是一个用于形式化线条图的javascript libray (也是后院工程)。在iPath中有一个模型可以让你把它导出到svg (路径)或DXF，这对数控商店更有用(这是整个项目的主要用例。

我正在做动画(在时间线上定制)。