thi-ng / domus Goto Github PK

(ns geom.clip-path-bug
  (:require-macros [hiccups.core :as hiccups :refer [html]])
  (:require
    [hiccups.runtime :as hiccupsrt]
    [thi.ng.domus.core :as dom]
    [hipo.core :as hipo]))

;; insert an #app div
(dom/create-dom! [:div#app]  js/document.body)

(def svg-markup 
     [:svg
        {:width 300 :height 300}
        [:defs [:clipPath {:id "myClip"}
                [:circle {:cx 50 :cy 50 :r 10}]]]
        [:rect {:x 0 :y 0 :width 200 :height 200
                :fill "black" :clip-path "url(#myClip)"}]])

; doesn't clip the rectangle
(comment
  (->> (dom/query nil "#app")
       (dom/create-dom! svg-markup)))

; doesn't show at all
(comment
  (.appendChild (dom/query nil "#app")
                 (hipo/create svg-markup)))

; works
(comment
  (aset (dom/query nil "#app")
        "innerHTML"
        (html svg-markup)))

;; now if we reevaluate the first form it works as intended