SVG image tag not rendering in firefox or safari

Question

SVG image tag not rendering in firefox or safari

Opened this issue 8 years ago · 2 comments

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.

Answer 1 · 2016-11-08T20:28:27.000Z

You know that freactive-dom doesn't use React right? It uses its own
renderer.

I did start (and almost finish) a React renderer for it that would be a
complete drop-in replacement for Reagent + the additional features that
freactive supports (using any IAtom-like thing), plugins, etc. but it's not
100% complete (mainly just converting attr & style props to JS).

On Tue, Nov 8, 2016 at 3:23 PM, drakezhard notifications@github.com wrote:

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:

<script type="text/javascript" src="js/app.js"></script>
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" ">") }}]])

(defonce root (fdom/append-child! (.-body js/document) [:div#root]))

(defn om-image [data owner](reify
om/IRender
%28render [this]
%28html [:div
[:div
[:h1 %28str %28:text data%29 1%29]
[: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 %28str %28: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" ">") }}]]]))))

(defn init [](fdom/mount! root %28freactive-image%29)
(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.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#58, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAC_FoZHwHvIB2FKgXYuhx6xwNdDTBB8ks5q8NpFgaJpZM4Ks3kS
.

Answer 2 · 2016-11-09T00:33:41.000Z

I didn't know that XD. I just assumed it was the back-end because I saw a react.cljs file in the source code. Still Freactive's Hiccup flavor doesn't properly render [:svg/image] for all browsers for some reason. It would be advantageous for mount! to take raw html or allow us to set inner html. I wouldn't mind if you told me a cljs trick that would monkey patch it either.