Are there any easy ways to use SVG？

[cyz1901]

Hello 👀 i would like to know if there are any suggested methods for building SVG in the library and injecting it into Resource [IO, HtmlElement [IO]]

It seems that svg is of type SVGElement rather than HTMLElement....

[armanbilge]

You can set an SVG string as the innerHTML of an HTMLElement:

div(()).evalTap(_.innerHtml.set(
  """
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />  
  </svg>
  """
))

https://scribble.ninja/u/armanbilge/drdmunmjkdipvwmojdfhonuveoa

Otherwise, we still need to add the API for SVG. It's do-able, just needs some work in fs2-dom and Calico to add the element types.

• Support SVG #146

[cyz1901]

Thank you for your help
it works
: )

[armanbilge]

Oh, I think another option is to create an org.scalajs.dom.SVGElement somehow and then cast it to a fs2.dom.Element[IO], then I think you should be able to add it into the tree normally.

[cyz1901]

Hi @armanbilge. hmmmm Forgive me for asking too many questions.
How can we perform certain operations after the element is loaded？
I want to add an animation effect after loading SVG.
This should be a side effect？

I tried two methods:
1.I hope to add an animation after the loading is completed through the JavaScript onload callback, but it seems that the console has not output.
p("programmers", cls := "text-8xl font-Roboto", onLoad --> (_.foreach(_ => IO(println(7777)))))

2.I added another step after creating the required resources, but the console output was null, indicating that the element was not fully loaded during execution

 Resource
      .eval(
        for {
          d <- IO(dom.document.createElement("div"))
        } yield (d.asInstanceOf[HtmlElement[IO]])
      )
      .evalTap(
        _.innerHtml.set(
          """
          <svg id="scrollingTip" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-brightness-high stroke-2" viewBox="0 0 16 16">
            <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"/>
          </svg>
          """
        )
      )
      .evalMap(x => {
        val g = for {
          _ <- IO {
            println(dom.document.getElementById("scrollingTip"))
          }
          e <- IO(x)
        } yield e
        g
      })

[armanbilge]

Hmm, instead of looking up the SVG element by id, It seems to me you can do x.firstChild to access the SVG element, because it is the first and only child of the div.

[cyz1901]

I tried it. It's a feasible solution.