主页 / coding / 问题 / 78128916
Accepted
AlignedDev
Asked: 2024-03-09 00:06:15 +0800 CST

如何使用 F# Giraffe 库渲染 SVG

  • 772

我需要在我的 html 中渲染 SVG 文件。

该文档还没有让我到达那里。

我想从嵌入文件中提取 SVG

open System.IO
open System.Reflection

[<AbstractClass; Sealed>]
type Assets private () =
    static let assembly = Assembly.GetExecutingAssembly()

    static let readSvgResource fileName =
        use stream =
            assembly.GetManifestResourceStream($"Namespace.Assets.Svg.{fileName}.svg")

        use reader = new StreamReader(stream)
        reader.ReadToEnd()

    static member DownArrow =
        readSvgResource "downArrow"

然后有一个我可以重用的好函数。这就是我陷入困境并且无法编译的地方。这个函数应该是什么？

let renderSvg color (assetsSvg: string) = 
     div [ _style $"color: {color}" ] [ RenderView.AsString.xmlNode assetsSvg ]
svg

1 个回答

  1. Best Answer

    您应该将原始 SVG 文本包装在rawTextGiraffe 函数中，然后使用模块的函数之一渲染整个 HTML 页面/片段等RenderView。下面是一个简单的示例，它采用原始 SVG 字符串并将其写入 HTML 文档：

    let svgtext =
    """
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
  <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle"><![CDATA[410]]></text>
<script xmlns="" id="bw-fido2-page-script"/></svg>
"""

open Giraffe.ViewEngine

let svg color (assetsSvg: string) =
    div [ _style $"color: {color}" ] [
        rawText assetsSvg
    ]

svg "red" svgtext
|> RenderView.AsString.htmlDocument
|> fun s -> System.IO.File.WriteAllText("svg.html", s)
    • 3

相关问题