Один элемент SVG с рефлексом FRP

Question

Один элемент SVG с рефлексом FRP

Я пытаюсь написать один элемент SVG в рефлекс FRP

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 верно. Я знаю из быстрой ссылки тип подписи:

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

Слегка любопытно, что такое монада m связан с mainWidget но в основном только на работу.

Это скомпилировано с использованием песочницы с рефлексом.

5

haskell svg reflex

Источник

user737051 08 июл '16 в 14:19

1 ответ

Решение

Другие вопросы по тегам haskell svg reflex

user1470114 08 июл '16 в 15:31 2016-07-08 15:31 · Accepted Answer · 2016-07-08 15:31

Здесь есть две вещи, которые нужно исправить.

Во-первых, вы хотите вернуть что-то, часто основное 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"