如何在 blaze-html 中呈现 blaze-svg 标记

Question

我想在使用 blaze-html 生成的 html 中直接包含使用 blaze-svg 生成的 svg 图。两者都基于 blaze-markup，所以我希望它很容易。

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。

这里是一个完整的例子，它生成一个 HTML 嵌入了 SVG 的文档：

{-# 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

这里是 blaze-svg 包中的示例，修改为嵌入到 HTML 文档中：

{-# 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

如何在 blaze-html 中呈现 blaze-svg 标记

How to render blaze-svg markup within blaze-html

html

svg

haskell

blaze-html