refactor(SvgPreview): use transparent container for SVG (#9294)

* refactor(SvgPreview): use transparent container for SVG

* test: fix snapshot
This commit is contained in:
one 2025-08-19 17:22:05 +08:00 committed by GitHub
parent 2e2cfc2409
commit cc8915842a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 5 deletions

View File

@ -2,7 +2,7 @@ import { memo, useCallback } from 'react'
import { useDebouncedRender } from './hooks/useDebouncedRender'
import ImagePreviewLayout from './ImagePreviewLayout'
import { ShadowWhiteContainer } from './styles'
import { ShadowTransparentContainer } from './styles'
import { BasicPreviewHandles } from './types'
import { renderSvgInShadowHost } from './utils'
@ -35,7 +35,8 @@ const SvgPreview = ({ children, enableToolbar = false, className, ref }: SvgPrev
ref={ref}
imageRef={containerRef}
source="svg">
<ShadowWhiteContainer ref={containerRef} className={className ?? 'svg-preview special-preview'} />
{/* 使用透明容器,把背景色完全交给 SVG 自己控制 */}
<ShadowTransparentContainer ref={containerRef} className={className ?? 'svg-preview special-preview'} />
</ImagePreviewLayout>
)
}

View File

@ -2,9 +2,9 @@
exports[`SvgPreview > basic rendering > should match snapshot 1`] = `
.c0 {
--shadow-host-background-color: white;
--shadow-host-border: 0.5px solid var(--color-code-background);
--shadow-host-border-radius: 8px;
--shadow-host-background-color: transparent;
--shadow-host-border: unset;
--shadow-host-border-radius: unset;
}
<div>