SVG绝对定位

Question

我是第一次玩SVG。

我想在我的SVG中做一些愚蠢的动画，但我遇到了一些麻烦

下面是我的代码片段：http://codepen.io/timbo27/pen/kAKJi

<div id="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<g>
    <path class="logo-start" d="M59.1,66.6c0.2,0.2,0.4,0.3,0.4,0.6c0,0.3-0.3,0.7-0.6,0.7c-0.2,0-0.4-0.1-0.5-0.2l-4.9-3.3c-0.3-0.2-0.4-0.3-0.4-0.6
        c0-0.3,0.2-0.5,0.4-0.6l4.9-3.3c0.1-0.1,0.3-0.2,0.5-0.2c0.3,0,0.6,0.3,0.6,0.6c0,0.3-0.2,0.5-0.4,0.6l-4.3,2.8L59.1,66.6z"/>
    ......
    <path class="logo-stop" d="M161.4,63.7l-4.3-2.8c-0.2-0.2-0.4-0.3-0.4-0.6c0-0.3,0.3-0.6,0.6-0.6c0.2,0,0.3,0.1,0.5,0.2l4.9,3.3
        c0.3,0.2,0.5,0.3,0.4,0.6c0,0.3-0.2,0.5-0.4,0.6l-4.9,3.3c-0.1,0.1-0.3,0.2-0.5,0.2c-0.3,0-0.6-0.3-0.6-0.7c0-0.3,0.2-0.5,0.4-0.6
        L161.4,63.7z"/>
</g>
</svg>
</div>

因此，我有一个SVG徽标(简单文本)

我已经为每个路径分配了一个类，并且在一些路径上做了一些最小的样式。

我希望有能力绝对地定位一些路径。

这个是可能的吗？

Answer 1

正如您所发现的，路径没有x/y属性或样式。

您可以添加一个transform="translate(x, y)"属性，其中x，y是浮点数，也可以添加一个CSS转换属性。

Answer 2

实际上答案是不，你不能。路径是基于它们在视图中的位置，所以从这个意义上说，它们都是绝对定位的。我诚实地建议您不要在SVG代码中弄得太乱，它很复杂，而且不太容易阅读。使用像这样的工具来移动路径要容易得多。这样，您就可以按照您希望的方式对它们进行定位，然后按照您希望的方式在HTML文档中使用它们。

要做你所说的动画，你应该看看JavaScript。有几个库可用于这样的目的。就是其中之一。

更新：我想在某种程度上抑制这一建议。诚然，SVG路径可能很复杂，很难处理，对于复杂的形状，最好使用能够导出为SVG的编辑器，如inkscape。然而，对于简单的图形和动画，直接在代码中这样做是完全可能的，也是非常有价值的。CSS动画现在可以直接应用于SVG元素，所以继续！抓住机会！犯错误！弄得一团糟！