如何在blaze html中渲染blaze svg标记

Question

我想要包括一个svg图表生成的火焰-svg直接在html生成的火焰-html。两者都是基于火焰标记，所以我认为这是容易的。

diagram1 :: Svg
diagram1 = ... 

try1 :: Html
try1 = html $
  body $ do
    h1 "My first diagram"
    toHtml diagram1

try2 :: Html
try2 :: html $
  body $ do
    h1 "My first diagram"
    toHtml $ renderSvg diagram1

try1和try2都传递编译器，但都没有显示图表。正确的方法是什么？直接包含svg标记有问题吗？

Answer 1

try2首先用renderSvg生成SVG的字符串表示，转义它(toHtml)并将结果包含到HTML中。使用它，您应该看到SVG的源代码，而不是结果映像。

try1实际上应该能工作。toHtml被定义为Svg类型上的标识，所以您也可以直接使用diagram1。

下面是一个完整的示例，它生成一个带有嵌入式SVG的HTML文档：

{-# LANGUAGE OverloadedStrings #-}
module Main where

import Prelude hiding (head)
import Text.Blaze.Svg11 hiding (title)
import Text.Blaze.Svg11.Attributes hiding (title)
import Text.Blaze.Html5
import Text.Blaze.Html.Renderer.Pretty

diagram1 :: Svg
diagram1 = svg ! width "100" ! height "100" $
  circle ! cx "50" ! cy "50" ! r "40" ! stroke "green"
         ! strokeWidth "4" ! fill "yellow"

try2 :: Html
try2 = docTypeHtml $ do
  head $ title "Works"
  body $ do
    h1 "My first diagram"
    diagram1

main :: IO ()
main = putStr $ renderHtml try2

Answer 2

下面是修改后嵌入到HTML中的blaze-svg包的示例：

{-# LANGUAGE OverloadedStrings #-}
import Text.Blaze.Svg11 ((!), mkPath, rotate, l, m)
import qualified Text.Blaze.Svg11 as S
import qualified Text.Blaze.Svg11.Attributes as A
import Text.Blaze.Svg.Renderer.String (renderSvg)
import qualified Text.Blaze.Html5 as H
import Text.Blaze.Html.Renderer.Text
import qualified Data.Text.Lazy.IO as TL

main :: IO ()
main = do
  let a = renderHtml try1 -- renderSvg svgDoc
  TL.putStrLn a

try1 :: H.Html
try1 = H.html $
  H.body $ do
    H.h1 "My first diagram"
    svgDoc

-- svgDoc :: S.Svg
svgDoc = S.svg ! A.version "1.1" ! A.width "150" ! A.height "100" ! A.viewbox "0 0 3 2" $ do
    S.g ! A.transform makeTransform $ do
      S.rect ! A.width "1" ! A.height "2" ! A.fill "#008d46"
      S.rect ! A.width "1" ! A.height "2" ! A.fill "#ffffff"
      S.rect ! A.width "1" ! A.height "2" ! A.fill "#d2232c"
      S.path ! A.d makePath

makePath :: S.AttributeValue
makePath = mkPath $ do
  l 2 3
  m 4 5

makeTransform :: S.AttributeValue
makeTransform = rotate 50