4

我正在尝试在反射 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附带的沙箱编译的。

4

1 回答 1

6

这里有两件事要解决。

首先，你要返回一些东西，通常基本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>

如果您想在浏览器中看到它，请确保xmlns="http://www.w3.org/20000/svg"在您的 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"
于 2016-07-08T15:31:11.560 回答