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>

Basicaly我有一个SVG徽标(简单文字)

我给每个路径一个类,并在一些路径上做了一些最小的样式.

我希望能够绝对定位一些路径.

这可能吗？

谢谢

Answer 1

路径没有您发现的x/y属性或样式.

您可以添加一个transform="translate(x, y)"属性,其中x,y是浮点数或者可能是CSS转换属性,但我不确定对SVG元素的CSS转换有多少支持.

Answer 2

真的答案是否定的,你不能.路径基于它们在视图中的位置,因此从这个意义上说它们都是绝对定位的.我对你的诚实建议是不要乱用SVG代码,它很复杂而且不是人类可读的.使用InkScape等工具移动路径要容易得多.这样,您可以按照您希望的方式定位它们,然后在HTML文档中按照您的意愿使用它们.

要做你正在谈论的动画,你应该看看JavaScript.有几个库可用于此类目的.拉斐尔是一个.