Question

我正在尝试设计一个断路器/开关，它可以关闭并打开某些事件。我使用SVG设计了断路器，并使用css动画和变换属性来设置它的关闭动画。

使用 transform-origin：bottom ，但它无法正常工作。请帮帮我以下是我的css代码：

news

这里是codepen链接，我有完整的代码，请随时编辑：

https://codepen.io/anon/pen/OQexEP

Answer 1

这可能不是你所要求的帮助，但我发现使用D3创建形状并为它们添加动画更容易。看看下面的我的片段。它可能会为您提供有关如何进行SVG动画的灵感。

＆＃13;

var svg = d3.select('body').append("svg").attr("width",200).attr("height",150);
svg.style("background-color","black");



var part1 = svg.append("path").attr("d","M100,0 L100,30").attr("fill","none").attr("stroke","white");

var part2 = svg.append("path").attr("d","M100,80 L100,150").attr("fill","none").attr("stroke","white");

var moving_part = svg.append("g").attr("transform","translate(100,80) rotate(45)");

moving_part.append("path").attr("d","M0,0 L0,-50").attr("fill","none").attr("stroke","gold").attr("stroke-width",2);
moving_part.append("circle").attr("cy",-50).attr("r",5).attr("fill","gold");

moving_part.transition().delay(1000).duration(3000).attr("transform","translate(100,80) rotate(0)");

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

SVG断路器/开关关闭动画

1 个答案: