JS中span元素dy值设置无效，自动重置为默认值求助

嘿，我碰到过类似的Highcharts文本布局坑，给你梳理下问题原因和解决方案：

问题根源 #

你现在用rend.text()传入带<span>的HTML内容，试图给span加dy属性，但这里有几个关键问题：

1. SVG vs HTML属性冲突：Highcharts的renderer.text()默认创建的是SVG <text>元素，里面的换行和偏移靠SVG的<tspan>实现，而HTML的<span>并不支持dy属性——你在Chrome开发者工具里改的其实是自动生成的SVG tspan的dy，不是代码里写的span属性，所以代码设置自然不生效。
2. Highcharts内部属性重置：当用rend.text()解析HTML时，Highcharts会把<br>转换成tspan，但会重置tspan的dy为默认值（比如你看到的15），覆盖你手动写的无效属性。
3. CSS属性在SVG文本中不生效：SVG的文本布局逻辑和HTML完全不同，line-height、margin这类CSS属性对SVG <text>元素根本不起作用，所以用这些方法也没效果。

解决方案1：用Highcharts原生tspan构建文本（推荐） #

直接用Highcharts的tspan来构建多行文本，手动设置每个tspan的dy和样式，这样属性不会被重置：

var myEle = document.getElementById("dynamicsubtitle1"); 
myEle && myEle.parentNode.removeChild(myEle); 

var chart = this, 
    rend = chart.renderer, 
    pie = chart.series[0], 
    left = chart.plotLeft + pie.center[0], 
    top = pie.center[1] + 20;

// 创建基础SVG text元素
var text = rend.text('', left, top)
    .attr({
        'text-anchor': 'middle',
        'id': 'dynamicsubtitle1',
        'zIndex': 10,
        'class': 'customTitle'
    })
    .add();

// 添加第一行：Total
text.add(rend.tspan('Total')
    .attr({
        'dy': 0,
        'style': 'color:#000; font-weight:normal'
    }));

// 添加第二行：Incidents，设置dy为1vw，重置x确保居中
text.add(rend.tspan('Incidents')
    .attr({
        'dy': '1vw',
        'x': left, // 重置x坐标，避免换行后偏移
        'style': 'color:#000; font-weight:normal'
    }));

// 添加第三行：数值，设置dy为2vw，重置x确保居中
text.add(rend.tspan(this.series[0].total)
    .attr({
        'dy': '2vw',
        'x': left,
        'style': 'color:#000; font-weight:bold'
    }));

解决方案2：用rend.label()渲染HTML内容 #

如果需要更复杂的HTML结构，可以用rend.label()创建支持HTML的容器，这样就能用CSS的margin-top来实现间距（代替dy）：

var myEle = document.getElementById("dynamicsubtitle1"); 
myEle && myEle.parentNode.removeChild(myEle); 

var chart = this, 
    rend = chart.renderer, 
    pie = chart.series[0], 
    left = chart.plotLeft + pie.center[0], 
    top = pie.center[1] + 20;

// 构建HTML内容，用margin-top控制行间距
var htmlContent = `
    <div class="customTitle" style="text-align:center; width: max-content;">
        <div style="color:#000;">Total</div>
        <div style="color:#000; margin-top:1vw;">Incidents</div>
        <div style="color:#000; font-weight:bold; margin-top:2vw;">${this.series[0].total}</div>
    </div>
`;

// 创建label并启用HTML支持（最后一个参数true）
var label = rend.label(htmlContent, left, top, null, null, null, true)
    .attr({
        'id': 'dynamicsubtitle1',
        'zIndex': 10
    })
    .align({
        align: 'center',
        verticalAlign: 'top',
        x: -label.width / 2 // 偏移一半宽度实现水平居中
    })
    .add();

这两种方法都能解决你遇到的dy被重置、CSS无效的问题，推荐第一种，因为更贴合Highcharts的SVG渲染逻辑，性能也更好~

内容的提问来源于stack exchange，提问作者Shar