Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG image tag not rendering in firefox or safari #58

Open
drakezhard opened this issue Nov 8, 2016 · 2 comments
Open

SVG image tag not rendering in firefox or safari #58

drakezhard opened this issue Nov 8, 2016 · 2 comments

Comments

@drakezhard
Copy link

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.
@aaronc
Copy link
Owner

aaronc commented Nov 8, 2016

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 [email protected] 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
.

@drakezhard
Copy link
Author

drakezhard commented Nov 9, 2016 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@aaronc @drakezhard