diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index 54763d8fa..7b87e065f 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/frontend/src/app/main/ui/shapes/frame.cljs @@ -26,7 +26,7 @@ (mf/defc frame-clip-def [{:keys [shape render-id]}] - (when (= :frame (:type shape)) + (when (and (= :frame (:type shape)) (not (:show-content shape))) (let [{:keys [x y width height]} shape transform (gsh/transform-str shape) props (-> (attrs/extract-style-attrs shape) @@ -66,8 +66,7 @@ [:* [:g {:clip-path (when (not show-content) (frame-clip-url shape render-id))} - (when (not show-content) - [:& frame-clip-def {:shape shape :render-id render-id}]) + [:& frame-clip-def {:shape shape :render-id render-id}] [:& shape-fills {:shape shape} (if path? diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs index 21bef0046..84a023e7b 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs @@ -224,10 +224,9 @@ (mf/use-effect (mf/deps add-children) (fn [] - (doseq [{:keys [frame shape]} add-children-prev] - (let [frame-node (get-shape-node node frame) - shape-node (get-shape-node shape) - mirror-node (dom/query frame-node (dm/fmt ".mirror-shape[href='#shape-%'" shape))] + (doseq [{:keys [shape]} add-children-prev] + (let [shape-node (get-shape-node shape) + mirror-node (dom/query (dm/fmt ".mirror-shape[href='#shape-%'" shape))] (when mirror-node (.remove mirror-node)) (dom/remove-attribute! (dom/get-parent shape-node) "display"))) @@ -235,6 +234,9 @@ (let [frame-node (get-shape-node frame) shape-node (get-shape-node shape) + clip-id + (dom/get-attribute (dom/query frame-node ":scope > defs > .frame-clip-def") "id") + use-node (.createElementNS globals/document "http://www.w3.org/2000/svg" "use") @@ -242,6 +244,7 @@ (or (dom/query frame-node ".frame-children") frame-node)] (dom/set-attribute! use-node "href" (dm/fmt "#shape-%" shape)) + (dom/set-attribute! use-node "clip-path" (dm/fmt "url(#%)" clip-id)) (dom/add-class! use-node "mirror-shape") (dom/append-child! contents-node use-node) (dom/set-attribute! (dom/get-parent shape-node) "display" "none")))))