SVG tags not rendered - Githubissues

vesten commented 10 years ago

Getting started with threepenny-gui and SVG I ported the simple example code from, http://www.w3schools.com/svg/, to this threepenny-gui Haskell,

module W3Svg (main) where

import           Control.Monad               (void)
import qualified Graphics.UI.Threepenny      as UI
import           Graphics.UI.Threepenny.Core

main :: IO ()
main = startGUI defaultConfig setup

setup :: Window -> UI ()
setup w = void $ do
    return w # set title "W3 Schools Svg"

    caption <- UI.h1 # set text "My first SVG in Haskell"

    -- <svg width="100" height="100">
    context <- mkElement "svg" # set (strAttr "width") "100"
                               # set (strAttr "height") "100"
    -- <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    circle <- mkElement "circle" # set (strAttr "cx") "50"
                                 # set (strAttr "cy") "50"
                                 # set (strAttr "r") "40"
                                 # set (strAttr "stroke") "green"
                                 # set (strAttr "stroke-width") "4"
                                 # set (strAttr "fill") "yellow"

    getBody w #+ [element caption, element context #+ [element circle]]

-- Copied from Graphics.UI.Threepenny.Attributes
strAttr :: String -> WriteAttr Element String
strAttr name = mkWriteAttr (set' (attr name))

However, when pointing a browser to http://localhost:8023 I see only the caption output and not the green and yellow circle of the example. Checking with the DOM inspector the tags seem to present, complete, and in the correct order.

HeinrichApfelmus commented 10 years ago

It turns out that SVG elements have to be created with the correct namespace, otherwise it will not work. See a StackOverflow answer.

In pure JavaScript, one has to write

 document.createElementNS("http://www.w3.org/2000/svg","circle");

instead of

document.createElement("circle");

in order to correctly create SVG elements.

Unfortunately, Threepenny currently does not expose the JavaScript function document.createElementNS.

vesten commented 10 years ago

Thanks for taking the time to look in to this.

If this is a desired feature, and with enough time and forbearance, I could possibly jinn together a pull request.

HeinrichApfelmus commented 9 years ago

This has been merged with pull request #89 .

HeinrichApfelmus / threepenny-gui

SVG tags not rendered #87