Can't draw a line in the g element of a CustomSVGSeries in react-vis and clojurescript

Question

In the following working code:

[:> rvis/CustomSVGSeries {:data [{:x x :y y 
                          :customComponent (fn []
                             (r/as-element [:g {:className "etiqueta"}
                                                [:text
                                                  [:tspan {:x 0 :y 0} "Hidrógeno "]
                                                  [:tspan {:x 0 :y "1em"} "Alfa"]]]))}]}]

I'm trying to add a line element:

[:> rvis/CustomSVGSeries {:data [{:x x :y y 
                          :customComponent (fn []
                             (r/as-element [:g {:className "etiqueta"}
                                                [:line {:x1 0 :y1 0 :x2 600 :y2 600 :strokeWidth 5 :fill "red"}]
                                                [:text
                                                  [:tspan {:x 0 :y 0} "Hidrógeno "]
                                                  [:tspan {:x 0 :y "1em"} "Alfa"]]]))}]}]

But doesn't work.

For me it's even stranger that some other SVG elements work; for instance [:circle {:cx 0 :cy 0 :r 20 :fill "orange"}] and [:ellipse {:cx 0 :cy 10 :rx 61 :ry 30 :fill "yellow"}] work perfectly...

I also tried with [:polyline {:points [0 0 600 600]}] but did not have luck either...

Answer 1

Thanks to @cfrick comment, I changed :fill with :stroke and it worked fine, both for :line and :polyline.