Início / coding / Perguntas / 78128916
Accepted
AlignedDev
Asked: 2024-03-09 00:06:15 +0800 CST

Como você renderiza um SVG com a biblioteca F# Giraffe

  • 772

Preciso renderizar um arquivo SVG no meu html.

A documentação não me levou até lá .

Quero extrair o SVG de um arquivo incorporado

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"

Então tenha uma função legal que eu possa reutilizar. É aqui que estou preso e ele não compila. Qual deveria ser essa função?

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

1 respostas

  1. Best Answer

    Você deve agrupar o texto SVG bruto na rawTextfunção Giraffe e, em seguida, renderizar toda a página/fragmento/etc HTML usando uma das RenderViewfunções do módulo. Aqui está um exemplo simples que pega uma string SVG bruta e a grava em um documento 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

relate perguntas