Очень часто бывают случаи, что невозможно методом "тыка" поймать нужные параметры viewBox
В этом случае выручит метод JS getBBox()
<svg xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="0 0 441 394.36" style="border:1px solid red;">
<path id="p1" fill="none" stroke="black" stroke-width="35" d="M329.9,1.5c60.56,0,109.6,49.03,109.6,109.47c0,109.47-109.6,171.8-219.06,281.27C110.97,282.77,1.5,220.44,1.5,110.97C1.5,50.53,50.54,1.5,110.97,1.5c54.73,0,82.1,27.37,109.47,82.1 C247.8,28.87,275.17,1.5,329.9,1.5z" />
</svg>
<script>
console.log(p1.getBBox());
</script>
Подставляем получившиеся значения во viewBox
<svg xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="1.5 1.5 438 390.74" style="border:1px solid red;">
<path id="p1" fill="none" stroke="black" stroke-width="1" d="M329.9,1.5c60.56,0,109.6,49.03,109.6,109.47c0,109.47-109.6,171.8-219.06,281.27C110.97,282.77,1.5,220.44,1.5,110.97C1.5,50.53,50.54,1.5,110.97,1.5c54.73,0,82.1,27.37,109.47,82.1 C247.8,28.87,275.17,1.5,329.9,1.5z" />
</svg>
<script>
console.log(p1.getBBox());
</script>
Но getBBox()
выводит параметры прямоугольника, описывающего фигуру svg без учета stroke-wifth
А она у нас 34
Второй момент,- при широкой строке, внешняя часть (половина строки) уйдет за пределы холста SVG (красная рамка) поэтому это надо учесть и изменить соответственно параметры viewBox
Было по расчетам getBBox()
viewBox="1.5 1.5 438 390.74"
Прибавляем 34
(по половине строки с каждой стороны)
Стало
viewBox="-15.5 -15.5 472 424.74
<svg xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-15.5 -15.5 472 422.74" style="border:1px solid red;">
<path id="p1" fill="none" stroke="black" stroke-width="34" d="M329.9,1.5c60.56,0,109.6,49.03,109.6,109.47c0,109.47-109.6,171.8-219.06,281.27C110.97,282.77,1.5,220.44,1.5,110.97C1.5,50.53,50.54,1.5,110.97,1.5c54.73,0,82.1,27.37,109.47,82.1 C247.8,28.87,275.17,1.5,329.9,1.5z" />
</svg>
<script>
console.log(p1.getBBox());
</script>