使用javascript更改svg路径的描边后，绘图超出了ViewBox的宽度和高度。但是我希望包含其描边的路径在ViewBox中完全可见。
var p2 = document.getElementById('p2');
p2.setAttribute("stroke-width", "20");<svg width="87.827858" height="75.68341" viewBox="0 0 87.827858 75.683411" xmlns="http://www.w3.org/2000/svg" style="background-color: tomato" id="svg1">
<path stroke="green" fill="none" stroke-linejoin="miter" stroke-width="2.84261" stroke-linecap="square" stroke-dashoffset="150" id="p1"
d="m 19.767551,1.421305 h 66.639003 c 0,24.787544 0,49.201764 0,72.571424 l -72.237524,0.26727 c -6.271839,-5.9713 -3.416511,-11.33672 -6.595083,-19.10577 -2.708216,-6.6194 6.437081,-17.92492 -3.523279,-17.25944 -10.108666,0.6754 12.178156,-25.397641 15.716883,-36.473484 z" />
</svg>
<svg width="87.827858" height="75.68341" viewBox="0 0 87.827858 75.683411" xmlns="http://www.w3.org/2000/svg" style="background-color: tomato" id="svg2">
<path stroke="green" fill="none" stroke-linejoin="miter" stroke-width="2.84261" stroke-linecap="square" stroke-dashoffset="150" id="p2"
d="m 19.767551,1.421305 h 66.639003 c 0,24.787544 0,49.201764 0,72.571424 l -72.237524,0.26727 c -6.271839,-5.9713 -3.416511,-11.33672 -6.595083,-19.10577 -2.708216,-6.6194 6.437081,-17.92492 -3.523279,-17.25944 -10.108666,0.6754 12.178156,-25.397641 15.716883,-36.473484 z" />
</svg>如何知道包括笔画在内的路径的大小？然后我可以改变ViewBox的大小。
如何知道包括笔画在内的路径的位置（负位置，我猜）？然后我可以添加属性转换（翻译）。
谢谢你。
您可以使用getBBox来获取路径的边界，但它会忽略包含的描边。将描边宽度添加到生成的边界可以在一定程度上提供帮助，正如您在代码片段中看到的那样，但您不能指望它。
红色方块代表原始边界，蓝色方块是放大的原始边界（每边都加上描边）：
const box = d3.select('path').node().getBBox();
console.log(box);
d3.select('svg')
.append('rect')
.attr('x', box.x)
.attr('y', box.y)
.attr('width', box.width)
.attr('height', box.height)
.style('stroke', 'red')
.style('fill', 'none')
d3.select('svg')
.append('rect')
.attr('x', box.x - 10)
.attr('y', box.y - 10)
.attr('width', box.width + 20)
.attr('height', box.height + 20)
.style('stroke', 'blue')
.style('fill', 'none')<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="250" height="200">
<path d="M 100,50 L 190,180 Q 180,60 70,90 Z" stroke="black" fill="none" stroke-width="10" />
<path d="M 100,50 L 190,180 Q 180,60 70,90 Z" stroke="white" fill="none" stroke-width="1" />
</svg>