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。

以下是生成包含嵌入式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

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

2 个答案: