From edce45095e5e4dd18845986a772a9df919de9314 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 17 May 2022 13:58:12 +0200 Subject: [PATCH] :bug: Remove xlinkHref to resolve Safari problem --- frontend/src/app/main/data/workspace/svg_upload.cljs | 4 ++-- frontend/src/app/main/ui/icons.clj | 2 +- frontend/src/app/main/ui/shapes/custom_stroke.cljs | 12 ++++++------ frontend/src/app/main/ui/shapes/fills.cljs | 2 +- frontend/src/app/main/ui/shapes/frame.cljs | 2 +- .../ui/workspace/shapes/frame/thumbnail_render.cljs | 2 +- .../src/app/main/ui/workspace/viewport/widgets.cljs | 2 +- frontend/src/app/render.cljs | 2 +- frontend/src/app/util/svg.cljs | 2 +- 9 files changed, 15 insertions(+), 15 deletions(-) diff --git a/frontend/src/app/main/data/workspace/svg_upload.cljs b/frontend/src/app/main/data/workspace/svg_upload.cljs index df39c8bc2..40d9d14ee 100644 --- a/frontend/src/app/main/data/workspace/svg_upload.cljs +++ b/frontend/src/app/main/data/workspace/svg_upload.cljs @@ -326,7 +326,7 @@ transform (->> svg-transform (gmt/transform-in (gpt/point svg-data))) - image-url (:xlink:href attrs) + image-url (or (:href attrs) (:xlink:href attrs)) image-data (get-in svg-data [:image-data image-url]) rect (->> (select-keys attrs [:x :y :width :height]) @@ -352,7 +352,7 @@ (merge rect-metadata) (assoc :svg-viewbox (select-keys rect [:x :y :width :height])) - (assoc :svg-attrs (dissoc attrs :x :y :width :height :xlink:href)))))) + (assoc :svg-attrs (dissoc attrs :x :y :width :height :href :xlink:href)))))) (defn parse-svg-element [frame-id svg-data element-data unames] (let [{:keys [tag attrs]} element-data diff --git a/frontend/src/app/main/ui/icons.clj b/frontend/src/app/main/ui/icons.clj index a31a1fa92..e78929591 100644 --- a/frontend/src/app/main/ui/icons.clj +++ b/frontend/src/app/main/ui/icons.clj @@ -13,5 +13,5 @@ class (str "icon-" (name id))] `(rumext.alpha/html [:svg {:width 500 :height 500 :class ~class} - [:use {:xlinkHref ~href}]]))) + [:use {:href ~href}]]))) diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs index b125f8d45..ba4776f2b 100644 --- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs +++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs @@ -34,7 +34,7 @@ clip-id (str "inner-stroke-" render-id "-" (:id shape) suffix) shape-id (str "stroke-shape-" render-id "-" (:id shape) suffix)] [:> "clipPath" #js {:id clip-id} - [:use {:xlinkHref (str "#" shape-id)}]])) + [:use {:href (str "#" shape-id)}]])) (mf/defc outer-stroke-mask [{:keys [shape render-id index]}] @@ -58,10 +58,10 @@ :width (:width bounding-box) :height (:height bounding-box) :maskUnits "userSpaceOnUse"} - [:use {:xlinkHref (str "#" shape-id) + [:use {:href (str "#" shape-id) :style #js {:fill "none" :stroke "white" :strokeWidth (* stroke-width 2)}}] - [:use {:xlinkHref (str "#" shape-id) + [:use {:href (str "#" shape-id) :style #js {:fill "black" :stroke "none"}}]])) @@ -233,7 +233,7 @@ (obj/clone) (obj/without ["fill" "fillOpacity" "stroke" "strokeWidth" "strokeOpacity" "strokeStyle" "strokeDasharray"]))))]] - [:use {:xlinkHref (str "#" shape-id) + [:use {:href (str "#" shape-id) :mask (str "url(#" stroke-mask-id ")") :style (-> (obj/get base-props "style") (obj/clone) @@ -241,7 +241,7 @@ (obj/without ["fill" "fillOpacity"]) (obj/set! "fill" "none"))}] - [:use {:xlinkHref (str "#" shape-id) + [:use {:href (str "#" shape-id) :style (-> (obj/get base-props "style") (obj/clone) (obj/set! "stroke" "none"))}]])) @@ -277,7 +277,7 @@ [:& stroke-defs {:shape shape :render-id render-id :index index}] [:> elem-name shape-props]] - [:use {:xlinkHref (str "#" shape-id) + [:use {:href (str "#" shape-id) :clipPath clip-path}]])) ; The SVG standard does not implement yet the 'stroke-alignment' diff --git a/frontend/src/app/main/ui/shapes/fills.cljs b/frontend/src/app/main/ui/shapes/fills.cljs index 45ba0586e..a3a8769e7 100644 --- a/frontend/src/app/main/ui/shapes/fills.cljs +++ b/frontend/src/app/main/ui/shapes/fills.cljs @@ -79,7 +79,7 @@ (obj/set! "height" height))]) (when has-image? - [:image {:xlinkHref (get embed uri uri) + [:image {:href (get embed uri uri) :preserveAspectRatio "none" :width width :height height}])]])]))))) diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index 168e26893..8e4d07866 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/frontend/src/app/main/ui/shapes/frame.cljs @@ -68,7 +68,7 @@ [:image.frame-thumbnail {:id (dm/str "thumbnail-" (:id shape)) - :xlinkHref (:thumbnail shape) + :href (:thumbnail shape) :x (:x shape) :y (:y shape) :width (:width shape) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs index 002926e8d..0630fe201 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs @@ -137,7 +137,7 @@ [:image {:ref frame-image-ref :x (:x shape) :y (:y shape) - :xlinkHref @image-url + :href @image-url :width (:width shape) :height (:height shape) :on-load on-image-load}]]))])) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 1c22c42d1..75cbaa64d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -147,7 +147,7 @@ :class "workspace-frame-icon" :style {:fill (when selected? "var(--color-primary-dark)")} :visibility (if show-artboard-names? "visible" "hidden")} - [:use {:xlinkHref "#icon-set-thumbnail"}]]]) + [:use {:href "#icon-set-thumbnail"}]]]) [:text {:x text-pos-x :y 0 :width width diff --git a/frontend/src/app/render.cljs b/frontend/src/app/render.cljs index 74280552c..5d921f0a7 100644 --- a/frontend/src/app/render.cljs +++ b/frontend/src/app/render.cljs @@ -264,7 +264,7 @@ :embed embed} (when-let [component-id (:component-id @state)] - [:use {:x 0 :y 0 :xlinkHref (str "#" component-id)}])]] + [:use {:x 0 :y 0 :href (str "#" component-id)}])]] ]))) diff --git a/frontend/src/app/util/svg.cljs b/frontend/src/app/util/svg.cljs index 198fd91c2..0fef4753e 100644 --- a/frontend/src/app/util/svg.cljs +++ b/frontend/src/app/util/svg.cljs @@ -961,5 +961,5 @@ (let [redfn (fn [acc {:keys [tag attrs]}] (cond-> acc (= :image tag) - (conj (:xlink:href attrs))))] + (conj (or (:href attrs) (:xlink:href attrs)))))] (reduce-nodes redfn [] svg-data )))