如何获得正确的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。这是一个简单的路径，绘制一个交叉的正方形：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

动画

要为路径设置动画，我们将使用两个属性的组合：

• stroke-dasharray：使我们的路径虚线，并定义破折号和空格的宽度
• stroke-dashoffset：抵消我们的路径

基本上，我们只要我们的路径（甚至更长）创建一个破折号，并添加一个高偏移量以使其不可见。然后我们将对此偏移进行动画处理以使其逐渐可见：

＆＃13;

＆＃13;

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; } 
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用Adobe Illustrator进行svg的正确方法。从那里你可以使用正确的svg代码保存svg文件。

Answer 3

在我的网站www.stretchsketch.com上，您可以查看多个可自定义的svg模型。大多数这些模型都是使用iPath创建的，这是一个javascript库，用于形式化线条图（也是后院设计）。在iPath中建立模型允许您将其导出到svg（路径）或DXF，这对cnc商店（整个项目的主要用例）更有用。

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