SVG image tag not rendering in firefox or safari #58
Description
I'm not completely sure what the bug is, but I suspect it has to do with React. Hiccup doesn't support React's dangerouslySetInnerHtml property, but sablono does. Somehow Chrome recognizes the href property, but Firefox and Safari require xlink:href property. After Freactive compiles the Hiccup syntax React spits out the correct image tag but neither Firefox or Safari render it. Finally Sablono is a library with hiccup syntax, that allows us to use the property dangerouslySetInnerHtml. The following is my repro of the bug.
This is the HTML template body, calling it properly renders the image tag on all browsers:
<body>
<svg width="300px" height="100px"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="img/key2.svg" x="0" y="0" height="100px" width="200px"></image>
</svg>
<div id="container"></div>
<script type="text/javascript" src="js/app.js"></script>
</body>
Freactive and Om(w/ Sablono) code:
(:refer-clojure :exclude [atom])
(:require [freactive.core :refer [atom cursor]]
[freactive.dom :as fdom]
[om.core :as om]
[sablono.core :as html :refer-macros [html]])
(:require-macros [freactive.macros :refer [rx]]))
(defn freactive-image []
[:div
[:h1 "Freactive Image"]
[:svg/svg {:width "300px" :height "100px"
:viewBox "0 0 100 100"
:xmlns "http://www.w3.org/2000/svg"
:xmlns:xlink "http://www.w3.org/1999/xlink"}
[:svg/image {:href "img/key2.svg"
:xlink:href "img/key2.svg"
:x 0 :y 0 :height "100px" :width "200px"}]]
[:svg/svg {:width "300px" :height "100px"
:viewBox "0 0 100 100"
:xmlns "http://www.w3.org/2000/svg"
:xmlns:xlink "http://www.w3.org/1999/xlink"
:dangerouslySetInnerHTML {:__html
(str "<image xlink:href=" "img/key2.svg"
" x=" "0" " y=" "0"
" height=" "100px" " width=" "200px" "></image>") }}]])
(defonce root (fdom/append-child! (.-body js/document) [:div#root]))
(defn om-image [data owner]
(reify
om/IRender
(render [this]
(html [:div
[:div
[:h1 (str (:text data) 1)]
[:svg {:width "300px" :height "100px"
:viewBox "0 0 100 100"
:xmlns "http://www.w3.org/2000/svg"
:xmlns:xlink "http://www.w3.org/1999/xlink"}
[:image {:href "img/key2.svg"
:xlink:href "img/key2.svg"
:x 0 :y 0 :height "100px" :width "200px"}]]]
[:div
[:h1 (str (:text data) 2)]
[:svg {:width "300px" :height "100px"
:viewBox "0 0 100 100"
:xmlns "http://www.w3.org/2000/svg"
:xmlns:xlink "http://www.w3.org/1999/xlink"
:dangerouslySetInnerHTML {:__html
(str "<image xlink:href=" "img/key2.svg"
" x=" "0" " y=" "0"
" height=" "100px" " width=" "200px" "></image>") }}]]]))))
(defn init []
(fdom/mount! root (freactive-image))
(om/root om-image {:text "Om Image"}
{:target (. js/document (getElementById "container"))}))```
I'd recommend either allowing for Freactive to render raw html so one can use the output of either Hiccup or Sablono or extending it's Hiccup syntax.