Svelte中prop变更时更新SVG文本引用，解决矩形不响应问题

云原生阿岚

2026-8-8

问题分析与解决

你的判断不完全准确——textElement的引用并没有失效，问题出在SVG文本内容更新后，你没有重新计算其边界矩形。

核心原因

当label变化时，Svelte会更新<text>的内容，但原代码中textElementBB的反应式声明只依赖textElement的引用变化，而文本内容改变并不会让textElement引用本身发生变化，因此getBoundingClientRect()不会重新执行，导致borderWidth和borderHeight始终停留在旧值。

解决方案

方案1：让边界计算依赖`label`变化

修改textElementBB的反应式声明，加入label作为依赖，这样每次文本内容更新时都会重新计算边界：

$: textElementBB = textElement && label && textElement.getBoundingClientRect()

方案2：使用`afterUpdate`生命周期函数

Svelte的afterUpdate会在组件每次更新（包括DOM内容更新）后执行，能确保获取到最新的文本边界：

<script>
    import { afterUpdate } from 'svelte'
    export let d
    export let label

    let textElement
    let textElementBB

    afterUpdate(() => {
        if (textElement) {
            textElementBB = textElement.getBoundingClientRect()
        }
    })

    $: x0 = 0
    $: y0 = d.y
    $: borderWidth = textElementBB?.width
    $: borderHeight = textElementBB?.height
    $: borderX = x0 
    $: borderY = y0 
    $: textX = borderX
    $: textY = borderY
</script>

Svelte中类似React `useEffect`的机制

Svelte没有直接对应useEffect的API，但有以下替代方案：

反应式声明（$:）：当依赖的变量变化时自动执行，适合同步更新状态，对应带依赖数组的useEffect。
生命周期函数：
- onMount：组件挂载后执行一次，对应useEffect(() => {}, [])。
- afterUpdate：组件每次更新后执行，对应无依赖的useEffect。
- beforeUpdate：组件更新前执行。
- onDestroy：组件销毁时执行，对应useEffect的清理函数。
自定义反应式逻辑：可将复杂逻辑封装成函数，通过$:触发执行。