如何让 Elm 动画师使用 CSS 动画为 SVG 元素设置动画？

大佬教程收集整理的这篇文章主要介绍了如何让 Elm 动画师使用 CSS 动画为 SVG 元素设置动画？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何让 Elm 动画师使用 CSS 动画为 SVG 元素设置动画？？

我正在尝试在 Elm 中制作 CSS 动画，但我无法让它工作！

Elm 有 几个 动画包。我正在尝试使用的是 @H_974_7@mdgriffith/elm-animator。遗憾的是，像许多 Elm 包一样，它的文档很少。它似乎提供了两种渲染方式：一种是通过运行 Elm 事件循环来对每一帧进行 DOM 更新，另一种是使用 CSS 动画 [我什至没有意识到它存在]。我正在尝试做后者。

我已尝试将代码缩小到最小示例：

@H_974_7@module Main exposing (main)

import Time
import Platform.Cmd
import browser
import HTML
import HTMl.Attributes
import HTMl.Events
import color
import Svg
import Svg.Attributes
import Animator
import Animator.CSS

main =
  browser.document
  {
    init          = \        () -> ({fill = Animator.init <| color.rgb 1 0 0},Platform.Cmd.nonE),subscriptions = \     state -> Animator.toSubscription Tick state animator,vIEw          = \     state -> {title = "Animation test",body = vIEw statE},update        = \ msg state -> (update msg state,Platform.Cmd.nonE)
  }

type alias State = { fill : Animator.Timeline color.color }

animator : Animator.Animator State
animator =
  Animator.animator
    |> Animator.CSs.watching (\ state -> state.fill) (\ c state -> { state | fill = c })

type Msg = Tick Time.Posix | DoSomething

update : Msg -> State -> State
update msg state0 =
  case msg of
    Tick      t -> Animator.update t animator state0
    DoSomething -> { state0 | fill = Animator.go Animator.slowly (color.rgb 1 1 0) state0.fill }

vIEw : State -> List (HTMl.HTML Msg)
vIEw state0 =
  [
    HTML.button [HTMl.Events.onClick DoSomething] [HTMl.text "Do something"],Svg.svg
      [
        Svg.Attributes.wIDth  "100px",Svg.Attributes.height "100px"
      ]
      [
        Animator.CSs.node "circle"
          state0.fill
          [
            Animator.CSs.color
              "fill"
              (\ x -> X)
          ]
          [
            Svg.Attributes.cx "50",Svg.Attributes.cy "50",Svg.Attributes.r  "50"
          ]
          []
      ]
  ]

我很欣赏它仍然很大，但我不知道如何在不混淆它正在做的事情的情况下轻松地缩短它。

当我运行它时，SVG 无法呈现。当我点击按钮时，什么也没有发生。

这是非常奇怪的部分：如果我打开 firefox Inspector 窗口，我可以看到 SVG <circle> 元素。如果我编辑它的各种属性，则什么也不会发生。但是，如果我右键单击 <circle> 并选择“编辑为 HTMl...”，然后在元素文本中添加一个空格并单击它，突然出现圆圈！此外，如果我再次右键单击该元素，现在它显示为“编辑为 SVG...”，这很可疑。

更有趣的是：如果我加载页面，单击按钮，然后然后执行上述技巧，彩色动画就会运行！

请注意，如果我编辑 HTML 并且不做任何更改，则它不起作用。我必须对文本进行微不足道的更改（否则我猜浏览器决定不需要重新处理？）

我所以确信这最终会成为一个奇怪的 firefox 错误......但后来我在 Chrome 和 Edge 中尝试了它，它完全相同！

有没有人有最模糊的线索为什么这不起作用？我对 Elm 代码做错了吗？ （我真的，真的很难弄清楚这个库是如何工作的；我基本上只是在猜测这些类型是如何组合在一起的。所以也许我做了一些愚蠢的事情。）

解决方法

<div> <!-- HTML Namespace -->
  <svg> 
    <circle /> <!-- SVG Namespace -->
  </svg>
  <math>
    <mrow></mrow> <!-- MathML namespace 
                  (not really relevant,just poinTing out different NS) -->
  </math>
</div>

node : String -> List (Attribute msg) -> List (Svg msg) -> Svg msg
node =
  VirtualDom.nodeNS "http://www.w3.org/2000/svg"