如何获得正确的 SVG 代码

Question

我一直在尝试创建一些像这样的 SVG 绘图动画： SVG 动画

然而我遇到的问题是如何为此获得正确的 SVG 代码。假设我有一张 png 绘图，我想将其转换为 SVG。当我使用 Inkscape 时，我得到类似这样的东西，但毫无用处。

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

像这样的在线工具：SVG转换器 好一点，因为它们输出类似这样的东西：

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

我以为这会起作用，但我错了。它不会动画。 如何获得像这些示例中那样的正确 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

  ：使我们的路径成为虚线，并定义破折号和空格的宽度

• stroke-dashoffset

  ：偏移我们的路径

基本上，我们将创建与路径一样长（甚至更长）的破折号，并添加一个高偏移量以使其不可见。然后我们将动画化该偏移以使其逐渐可见：

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 创建的，iPath 是一个用于形式化线条图（也是后院设计）的 JavaScript 库。在 iPath 中拥有模型可以让您将其导出到 svg（路径）或 DXF，这对于 CNC 商店（整个项目的主要用例）更有用。

我正在制作动画（在时间轴上自定义）。

Answer 4

<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,0111 l 0,100 l -100,0 l 0,-100 l 100,100 M 110,10 l -100,100" />
</svg>