我正在尝试在反射 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是正确的。我从quickref知道类型签名是:
elAttr :: String -> Map String String -> m a -> m a
有点好奇 monad m 与 mainWidget 相关联，但主要只是开始工作。
这是使用 reflex 附带的沙箱编译的.
最佳答案
这里有两件事需要解决。
首先，你想要返回一些东西，通常基本的return()将允许你编译。
其次，elAttr 采用 2 个输入类型，因此在“圆圈”之后，您需要将第二个参数放在括号中，而不是 $ 中。
这就是它的样子:
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"
关于haskell - 带有反射 frp 的单个 svg 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38268962/