Question

我有一个容纳SVG的容器。点击后，SVG会与其他SVG一起更改。

第一个SVG

.filled {
  fill: blue;
  transition: all .5s ease-in;
}

另一个实际上是相同的图像，但没有填充。

.unfilled {
  transition: all .5s ease-in;
}

从未填充SVG转换为填充SVG时，动画可以正常工作。但它反过来不起作用。（过渡是即时的）

任何人都可以帮我理解出了什么问题吗？

Answer 1

将ease-in更改为ease-in-out。

有关过渡的更多信息，请访问：http://www.w3schools.com/css/css3_transitions.asp

Answer 2

我刚刚使用jQuery更改了类，它似乎可以工作。

JS

$('#changeme').on("click", function() {
    $("#mySvg").attr('class', 'unfilled');
});

HTML

 <svg width="100" height="100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" id="mySvg" class="filled" />
  </svg>
  <button id="changeme">Change me</button>

CSS转换填充属性只能以一种方式工作

2 个答案: