Rendering of text for dominant-baseline='middle' is in

[Lassesen]

Description

I sent the following test case SVG to both the page (edge, chrome) and to the DLL. I was expecting agreement. The svg actually is testing whether my formula for getting a bounding box is working correctly with rotations. P.S. I am generating data charts using Asp Classic from adhoc record sets so I do not know the size of text strings ... some are very long, hence I need to calculate the bounding box during the building of the svg.

Example data

 <svg xmlns='http://www.w3.org/2000/svg' width='1290' height='200' version='1.1'> <rect x='15' y='42' width='95.4' stroke-width='0.5' fill-opacity='0' height='12' stroke='red' />
<text x='15' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  textLength='95.4'	lengthAdjust='spacingAndGlyphs' >Angle 0 degrees</text>
 <rect x='141.15811095159' y='42.0911534788248' width='102.29781509595' stroke-width='0.5' fill-opacity='0' height='29.4881313033789' stroke='red' />
<text x='142' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  transform =' rotate(10,142,48) '  textLength='101.76'	lengthAdjust='spacingAndGlyphs' >Angle 10 degrees</text>
 <rect x='267.347879173618' y='42.3618442630654' width='99.7273629511757' stroke-width='0.5' fill-opacity='0' height='46.080280689309' stroke='red' />
<text x='269' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  transform =' rotate(20,269,48) '  textLength='101.76'	lengthAdjust='spacingAndGlyphs' >Angle 20 degrees</text>
 <rect x='393.60000004641' y='42.8038475504985' width='94.1267454507257' stroke-width='0.5' fill-opacity='0' height='61.2723041118874' stroke='red' />
<text x='397' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  transform =' rotate(30,397,48) '  textLength='101.76'	lengthAdjust='spacingAndGlyphs' >Angle 30 degrees</text>
 <rect x='519.943274396617' y='43.403733295357' width='85.6661345175115' stroke-width='0.5' fill-opacity='0' height='74.602599642662' stroke='red' />
<text x='524' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  transform =' rotate(40,524,48) '  textLength='101.76'	lengthAdjust='spacingAndGlyphs' >Angle 40 degrees</text>
 <rect x='646.403733398698' y='44.1432742734605' width='74.6026015247149' stroke-width='0.5' fill-opacity='0' height='85.6661330111684' stroke='red' />
<text x='651' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  transform =' rotate(50,651,48) '  textLength='101.76'	lengthAdjust='spacingAndGlyphs' >Angle 50 degrees</text>
 <rect x='773.003847630883' y='44.9999999071798' width='61.272306312465' stroke-width='0.5' fill-opacity='0' height='94.1267443658621' stroke='red' />
<text x='778' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  transform =' rotate(60,778,48) '  textLength='101.76'	lengthAdjust='spacingAndGlyphs' >Angle 60 degrees</text>
 <rect x='899.761844318052' y='45.9478790225441' width='46.0802831415479' stroke-width='0.5' fill-opacity='0' height='99.7273623207545' stroke='red' />
<text x='905' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  transform =' rotate(70,905,48) '  textLength='101.76'	lengthAdjust='spacingAndGlyphs' >Angle 70 degrees</text>
 <rect x='1026.69115350674' y='46.9581107932634' width='29.488133932769' stroke-width='0.5' fill-opacity='0' height='102.297814939127' stroke='red' />
<text x='1033' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  transform =' rotate(80,1033,48) '  textLength='101.76'	lengthAdjust='spacingAndGlyphs' >Angle 80 degrees</text>
 <rect x='1153.8' y='47.9999998392306' width='12.0000027266487' stroke-width='0.5' fill-opacity='0' height='101.760000321539' stroke='red' />
<text x='1160' y='48'  dominant-baseline='middle'  font-size='12'  stroke-width='0.5'  fill='#000000'  text-anchor='start'  transform =' rotate(90,1160,48) '  textLength='101.76'	lengthAdjust='spacingAndGlyphs' >Angle 90 degrees</text>
</svg>

Example data

Used Versions

Windows using both Edge and Chrome.

[afarago]

+1