Add support for dx, dy attributes for text

[jonahwilliams]

No description provided.

[dnfield]

flutter_svg had an incorrect but sometimes working implementation of this. I'm not really sure if we should bother carrying it over or not.

There is at least one SVG I had as a test case that happened to work because it fell into the almost-correct part of what was implemented (text_02.svg).

A correct implementation of this needs to know the "current text position", which would either require offline text measurement or require us to make several Paragraph objects instead of a single one.

I'm inclined to pass on this for now.

[CaptainDario]

Updating to v2 also breaks text that uses transform

v1.1.6

v2

svg

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ATTLIST g
xmlns:kvg CDATA #FIXED "http://kanjivg.tagaini.net"
kvg:element CDATA #IMPLIED
kvg:variant CDATA #IMPLIED
kvg:partial CDATA #IMPLIED
kvg:original CDATA #IMPLIED
kvg:part CDATA #IMPLIED
kvg:number CDATA #IMPLIED
kvg:tradForm CDATA #IMPLIED
kvg:radicalForm CDATA #IMPLIED
kvg:position CDATA #IMPLIED
kvg:radical CDATA #IMPLIED
kvg:phon CDATA #IMPLIED >
<!ATTLIST path
xmlns:kvg CDATA #FIXED "http://kanjivg.tagaini.net"
kvg:type CDATA #IMPLIED >
]>
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0 0 109 109">
<g id="kvg:StrokePaths_091d1" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;">
<g id="kvg:091d1" kvg:element="金" kvg:radical="general">
	<g id="kvg:091d1-g1" kvg:position="top" kvg:phon="今1">
		<path id="kvg:091d1-s1" kvg:type="㇒" d="M51.75,11.88c0.25,1.52-0.22,3.57-0.8,4.84C47.73,23.79,33.13,47.1,14.5,58" stroke="hsl(0, 100%, 50%)" stroke-width="2"/>
		<path id="kvg:091d1-s2" kvg:type="㇏" d="M52.25,18.25c9.5,7.5,34.14,30.88,37.21,32.67c3.12,1.82,4.14,2.66,5.54,2.83" stroke="hsl(13, 100%, 50%)" stroke-width="2"/>
	</g>
	<g id="kvg:091d1-g2" kvg:position="bottom">
		<g id="kvg:091d1-g3" kvg:phon="今2">
			<path id="kvg:091d1-s3" kvg:type="㇐" d="M34.02,47.08c1.69,0.65,3.85,0.36,5.6,0.21c6.91-0.6,14.33-1.69,23.99-2.64c2.07-0.2,4.1-0.4,6.15,0.12" stroke="hsl(26, 100%, 50%)" stroke-width="2"/>
			<path id="kvg:091d1-s4" kvg:type="㇐" d="M30.18,64.96c1.95,0.67,4.47,0.31,6.47,0.12c9.24-0.87,17.42-1.58,31.35-2.53c2.3-0.16,4.68-0.36,6.96,0.08" stroke="hsl(39, 100%, 50%)" stroke-width="2"/>
		</g>
		<path id="kvg:091d1-s5" kvg:type="㇑a" d="M51.47,48.82c0.89,0.85,0.89,3.76,0.89,4.43c0,3.64,0.27,38.71,0.22,39.82" stroke="hsl(52, 100%, 50%)" stroke-width="2"/>
		<path id="kvg:091d1-s6" kvg:type="㇔" d="M31,74.75c3.25,3,7.48,9.27,8.5,12" stroke="hsl(65, 100%, 50%)" stroke-width="2"/>
		<path id="kvg:091d1-s7" kvg:type="㇒" d="M73.01,72.11c0.24,1.14,0.11,2.46-0.54,3.51C70.38,79,66.44,83.22,63,86" stroke="hsl(78, 100%, 50%)" stroke-width="2"/>
		<path id="kvg:091d1-s8" kvg:type="㇐" d="M18.5,94.86c2.88,1.01,6.41,0.4,9.37,0.15c16.55-1.42,32.95-2.12,51.51-3c3.13-0.15,6.32-0.27,9.38,0.59" stroke="hsl(91, 100%, 50%)" stroke-width="2"/>
	</g>
</g>
</g>
<g id="kvg:StrokeNumbers_091d1" style="font-size:8;fill:#808080">
	<text transform="matrix(1 0 0 1 43.25 13.13)" stroke="hsl(0, 100%, 50%)" fill="hsl(0, 100%, 50%)" stroke-width="0.5">1</text>
	<text transform="matrix(1 0 0 1 60.50 21.50)" stroke="hsl(13, 100%, 50%)" fill="hsl(13, 100%, 50%)" stroke-width="0.5">2</text>
	<text transform="matrix(1 0 0 1 42.50 43.50)" stroke="hsl(26, 100%, 50%)" fill="hsl(26, 100%, 50%)" stroke-width="0.5">3</text>
	<text transform="matrix(1 0 0 1 21.50 66.50)" stroke="hsl(39, 100%, 50%)" fill="hsl(39, 100%, 50%)" stroke-width="0.5">4</text>
	<text transform="matrix(1 0 0 1 56.50 54.50)" stroke="hsl(52, 100%, 50%)" fill="hsl(52, 100%, 50%)" stroke-width="0.5">5</text>
	<text transform="matrix(1 0 0 1 23.50 78.50)" stroke="hsl(65, 100%, 50%)" fill="hsl(65, 100%, 50%)" stroke-width="0.5">6</text>
	<text transform="matrix(1 0 0 1 78.50 74.50)" stroke="hsl(78, 100%, 50%)" fill="hsl(78, 100%, 50%)" stroke-width="0.5">7</text>
	<text transform="matrix(1 0 0 1 10.50 96.50)" stroke="hsl(91, 100%, 50%)" fill="hsl(91, 100%, 50%)" stroke-width="0.5">8</text>
</g>
</svg>

[dnfield]

dx and dy shoul dbe working now, but this SVG is showing a different bug.

[dnfield]

(it doesn't use dx/dy at all)

[CaptainDario]

Sorry, I thought the transform and dx/dy were related, especially because it stopped working with v2.
Should I open a new issue for that?

[dnfield]

Actually, try just running flutter pub upgrade. This is fixed in the latest version(s).

[CaptainDario]

@dnfield I am encountering this on flutter_svg 2.0.5 and vector_graphics 1.1.5 (1.1.5+1 available), should I update a different package?

[dnfield]

You need 1.1.5+1 to fix the issue you're seeing. Do flutter pub upgrade.

[FeodorFitsner]

It doesn't work with 1.1.5+1 if text contains both x/y and transform.

Example:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="500" viewBox="0 0 700 500">
   <g>
      <text text-anchor="end" x="50" y="20" transform="translate(0,300)">1</text>
   </g>
   <g class="ytick">
      <text text-anchor="end" x="50" y="20" transform="translate(0,200)">2</text>
   </g>
   <g class="ytick">
      <text text-anchor="end" x="50" y="20" transform="translate(0,100)">3</text>
   </g>
</svg>

Expected result:

Actual result:

Should I submit a new bug?

[dnfield]

Yes