ng-style 不适用于 stroke-dasharray 和 stroke-dashoffset CSS 元素

【问题标题】：ng-style not working with stroke-dasharray and stroke-dashoffset CSS elementsng-style 不适用于 stroke-dasharray 和 stroke-dashoffset CSS 元素
【发布时间】：2017-08-01 04:00:41
【问题描述】：

通过 ng-style 传递这些值，所以：

ng-style="{'stroke-dasharray':data.value, 'stroke-dashoffset': data.value}"

破坏了我的圆环图，但如果它们在应用于 div 元素的类中的 CSS 中（circle_animation，请参见 Fiddle）。小提琴在这里：

Donut chart

有什么想法吗？目标是具有 ng 风格的工作，因此动态传递圆周......

法比奥

【问题讨论】：

标签： javascript html css angularjs css-animations

【解决方案1】：

ng-style 通常需要一个表达式，其计算结果为具有键值对的对象。它不会像您使用的那样在字符串中执行插值。您使用的方式是 ng-class 的工作方式。

要使其正常工作，您需要执行以下操作：

<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none" ng-style="{'stroke-dasharray': {{data.value}}, 'stroke-dashoffset': {{data.value}}}"/>

查看工作示例：Plunk

【讨论】：

嗨，纳兰！非常感谢，我还有一个问题：您是否还知道如何编辑代表百分比的值（stroke-dashoffset，50）？它在@keyframes donut-chart-1 { to { stroke-dashoffset: 50; } }
好吧，我不确定那个。如果有帮助，看看这个 -stackoverflow.com/a/18481715/572799