如何使用 CSS 或 JavaScript 动画或转换 SVG 路径？

Question

我在 Adobe Illustrator 中创建了一个 SVG 图像，它具有以下代码：

<svg id="logo_top" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1440 1440" enable-background="new 0 0 1440 1440"
     xml:space="preserve" height="512px" width="512px">
  <g>
    <path id="path1" d="M1140.475,774.096c4.692,3.807,12.367,5.709,23.023,5.709c10.655,0,18.326-1.902,23.023-5.709
                                     c4.691-3.805,7.039-9.764,7.039-17.885c0-8.117-2.348-14.08-7.039-17.887c-4.697-3.805-12.368-5.707-23.023-5.707
                                     c-10.656,0-18.331,1.902-23.023,5.707c-4.697,3.807-7.04,9.77-7.04,17.887C1133.435,764.332,1135.777,770.291,1140.475,774.096z" />
    <path id="path2" d="M1140.475,716.163c4.693,3.806,12.367,5.708,23.023,5.708s18.326-1.902,23.023-5.708c4.691-3.806,7.039-9.764,7.039-17.886
                                     c0-8.117-2.348-14.08-7.039-17.886c-4.697-3.806-12.367-5.708-23.023-5.708s-18.33,1.902-23.023,5.708
                                     c-4.697,3.806-7.039,9.769-7.039,17.886C1133.436,706.399,1135.777,712.357,1140.475,716.163z" />
    <path id="path3" d="M1140.475,658.23c4.693,3.805,12.367,5.707,23.023,5.707s18.326-1.902,23.023-5.707c4.691-3.807,7.039-9.764,7.039-17.887
                                     c0-8.116-2.348-14.08-7.039-17.885c-4.697-3.807-12.367-5.709-23.023-5.709s-18.33,1.902-23.023,5.709
                                     c-4.697,3.805-7.039,9.769-7.039,17.885C1133.436,648.467,1135.777,654.424,1140.475,658.23z" />
  </g>
</svg>

我想要实现的是当我悬停在 SVG 上时让最上面的点向上移动。到目前为止，我已经尝试了以下方法：

transform: translate(0, 10px);
position: relative; 和 bottom: 10px;
margin-bottom: 10px;
padding-bottom: 10px;

不幸的是，上面的 none 已经奏效了，我现在很好奇为什么 svg 元素需要这种特殊处理并且不像其他元素那样工作 "normal" HTML元素.

我知道可以使用 animatetransform 对多边形进行动画处理。但它似乎也不适用于我的路径。

<animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 60 70"
                      to="360 60 70"
                      dur="10s"
                      repeatCount="indefinite"/>

为了将最上面的点向上移动，我必须更改什么属性？

Answer 1

为了操纵路径点，需要使用 JavaScript。以下代码实现了预期的结果：

$("#path1").css("transform", "translate(0, -100px)");

如何使用 CSS 或 JavaScript 动画或转换 SVG 路径？

How can I animate or transition SVG paths with CSS or JavaScript?

html

javascript

css

svg

svg-path