SVG绝对定位答案

【问题标题】：SVG absolute positioningSVG绝对定位
【发布时间】：2014-10-06 07:05:07
【问题描述】：

我是第一次玩 SVG。

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

这是我的代码的 sn-p： 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 徽标（简单文本）

我给每条路径一个类，并在一些路径上做了一些最小的样式。

我希望能够绝对定位某些路径。

这可能吗？

【问题讨论】：

您是否考虑过使用 Raphael JS 库并在画布元素中创建形状/路径？您可以使用 x/y 坐标定位并设置动画

标签： html css svg

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

要制作您所说的动画，您应该使用 JavaScript。有几个库可用于此类目的。 Raphael 合一。

更新：我想稍微限制一下这个建议。确实，SVG 路径可能很复杂且难以使用，对于复杂的形状，最好使用能够导出为 SVG 的编辑器，例如inkscape。但是，对于简单的图形和动画，直接在代码中这样做是完全可能的，而且非常有益。 CSS 动画现在可以直接应用于 SVG 元素，继续！把握机会！犯错误！弄得一团糟！

【讨论】：

添加到您的 inkscape 建议中：该程序提供“另存为普通 SVG”和“文件 -> 清理文档”。这两个选项都极大地有助于以人类可读的方式删除元数据和格式化 SVG。在为网站设计徽标或图片时，我通常在文本编辑器和 inkscape 之间切换：两者都有其优点。注意：清理 SVG 文件也会删除潜在有用的数据，例如 cmets、调色板和编辑器设置——所以最好也保留原件。