🐛 Remove xlinkHref to resolve Safari problem

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

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}]])))
 

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'

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}])]])])))))

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)

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}]]))]))

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

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)}])]]
 
        ])))
 

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 )))