0

I am struggling with an SVG, where I embed HTML via foreignobject. Here's a minimal component:

val SvgDemoComponent = ReactComponentB[Unit]("Demo")
.render { _ =>
  <.svg.svg(
    <.svg.foreignobject(
      <.div("Hello From SVG")
    )
  )
}
.build

The problem is that the "Hello" text is not visible. However, I can make a minor whitespace edit in Chrome or FF and then it becomes visible:

enter image description here

Update: The problem is reproducible with plain React, i.e. it is not caused by the scalajs-react abstraction. I have just posted it as a new SO question.

Community
  • 1
  • 1
Rahel Lüthy
  • 6,837
  • 3
  • 36
  • 51

1 Answers1

1

Caused by a spelling mistake in scalajs-react: foreignObject requires a capital O.

PR submitted.

Rahel Lüthy
  • 6,837
  • 3
  • 36
  • 51