带有反射 frp 的单个 svg 元素

Question

我正在尝试在 reflex FRP 中编写单个 SVG 元素

import Reflex.Dom
import qualified Data.Map as Map

main = mainWidget $ myDiv

myDiv = el "svg" $ do
  elAttr "circle"  $ Map.fromList [ ("cx" , "50") , ("cy", "50"), ("r" , "40"), ("stroke" , "green"), ("fill",  "yellow" )]

这不编译。希望 Data.Map is correct. I know from the quickref 类型签名是：

elAttr     :: String ->          Map String String  -> m a -> m a

有点好奇什么 monad m 与 mainWidget 相关联，但主要只是开始工作。

这是使用reflex.

附带的沙箱编译的

Answer 1

这里有两件事要解决。

首先，你要return一些东西，往往基本的return ()会让你编译。

其次，elAttr 采用 2 种输入类型，因此在 "circle" 之后，您希望将第二个参数放在括号中而不是 $。

这是它的样子：

import Reflex.Dom
import qualified Data.Map as Map

main = mainWidget $ myDiv

myDiv = el "svg" $ do
  elAttr "circle"  (Map.fromList [ ("cx" , "50") , ("cy", "50"), ("r" , "40"), ("stroke" , "green"), ("fill",  "yellow" )]) $ return ()

编译后，您应该可以在浏览器的元素检查器中看到它。

<html>
  <head>
    <script language="javascript" src="rts.js"></script>
    <script language="javascript" src="lib.js"></script>
    <script language="javascript" src="out.js"></script>
  </head>
  <body>
    <svg>
     <circle cx="50" cy="50" fill="yellow" r="40" stroke="green"></circle>
    </svg>
  </body>
</html>

如果您想在浏览器中看到它，请确保在您的 svg 元素中定义此属性 xmlns="http://www.w3.org/20000/svg"，如下所示 elDynAttrNS':

main = mainWidget $ myDiv

myDiv = do
  let attrs = constDyn $ fromList
               [ ("width" , "500")
               , ("height" , "250")
               ]
  let cAttrs = constDyn $ fromList
               [ ("cx", "50")
               , ("cy", "50")
               , ("r", "40")
               , ("stroke", "green")
               , ("stroke-width", "3")
               , ("fill",  "yellow" )
               ]

  s <- elSvg "svg" attrs (elSvg "circle" cAttrs (return ()))
  return ()

elSvg tag a1 a2 = do
  elDynAttrNS' ns tag a1 a2
  return ()

ns :: Maybe String
ns = Just "http://www.w3.org/2000/svg"

带有反射 frp 的单个 svg 元素

a single svg element with reflex frp

svg

haskell

reflex