From eb405e1c2519bdfb86221be615bd075126d955fe Mon Sep 17 00:00:00 2001 From: zhaojie09 Date: Fri, 2 Feb 2024 15:50:56 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20fix=20svg=20use=20element?= =?UTF-8?q?=20color=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/embed-svg-use.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/embed-svg-use.ts b/src/embed-svg-use.ts index 2b2656b..8aabea1 100644 --- a/src/embed-svg-use.ts +++ b/src/embed-svg-use.ts @@ -1,4 +1,3 @@ -import { cloneNode } from './clone-node' import { contextFetch } from './fetch' import type { Context } from './context' @@ -29,12 +28,12 @@ export function embedSvgUse( if (definition) { // found local embedded definition return [ - cloneNode(definition, context) - .then(clonedChildNode => { - if (!svgDefsElement?.querySelector(query)) { - svgDefsElement?.appendChild(clonedChildNode) - } - }), + // If custom cloneNode is used, the element's style will be defined inline, and the use tag cannot override the style. + // On balance, the probability that external styles will affect defs elements is small, so origin cloneNode is used. + new Promise(resolve => { + svgDefsElement?.appendChild(definition.cloneNode(true)) + resolve() + }), ] } else if (svgUrl) { // no local definition but found an url // try to fetch the svg and append it to the svgDefsElement