fskpf/svg2roughjs

Symbols don't seem to be instantiated with the proper transform

ygra opened this issue · 1 comments

ygra commented

E.g.:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="900" height="900">
	<defs>
		<symbol id="s" viewBox="0 0 3 3">
			<rect fill="#000" width="1" height="1" x="1" y="1"/>
		</symbol>
	</defs>
	<rect width="900" height="900" fill="#fff"/>
	<use xlink:href="#s" x="0" y="0" width="900" height="900"/>
	<use xlink:href="#s" x="0" y="0" width="300" height="300"/>
	<use xlink:href="#s" x="300" y="0" width="300" height="300"/>
	<use xlink:href="#s" x="600" y="0" width="300" height="300"/>
	<use xlink:href="#s" x="0" y="300" width="300" height="300"/>
	<use xlink:href="#s" x="600" y="300" width="300" height="300"/>
	<use xlink:href="#s" x="0" y="600" width="300" height="300"/>
	<use xlink:href="#s" x="300" y="600" width="300" height="300"/>
	<use xlink:href="#s" x="600" y="600" width="300" height="300"/>
</svg>

Symbols work differently in use elements from other referenced elements. I guess we don't handle them at all right now.

ygra commented

Another test image:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="900" height="600">
<defs>
<symbol id="s" viewBox="0 0 2 2" preserveAspectRatio="none">
<path d="M0,1L1,0L2,1L1,2z"/>
</symbol>
</defs>
<rect width="900" height="600" fill="#da121a"/>
<g fill="#fff">
<path d="M 219.71808,240.61853 C 190.43945,241.53601 172.36239,256.4476 158.67555,268.45016 C 144.5472,280.83985 135.07401,290.15142 109.53808,290.15142 C 84.002164,290.15142 74.528933,280.83981 60.400589,268.45016 C 46.80586,256.52844 28.931937,241.83817 0,240.74116 L 0,303.3929 C 22.947247,304.21187 32.228288,313.2853 45.694358,325.0942 C 59.822725,337.48383 78.560615,352.92578 109.53808,352.92578 C 140.51554,352.92578 159.3118,337.48388 173.44015,325.0942 C 187.5685,312.70449 197.04172,303.3929 222.57762,303.3929 C 248.11355,303.3929 257.5868,312.70451 271.7151,325.0942 C 285.84343,337.48383 304.63969,352.92578 335.61719,352.92578 C 366.59467,352.92578 385.33255,337.48388 399.46089,325.0942 C 413.58927,312.70449 423.12082,303.3929 448.65674,303.3929 C 474.19262,303.3929 483.66588,312.70451 497.79423,325.0942 C 511.92259,337.48383 530.66046,352.92578 561.63795,352.92578 C 592.61542,352.92578 611.41167,337.48388 625.54001,325.0942 C 639.66835,312.70449 649.14161,303.3929 674.67749,303.3929 C 700.2134,303.3929 709.68664,312.70451 723.81499,325.0942 C 737.94334,337.48383 756.73959,352.92578 787.71706,352.92578 C 818.69448,352.92578 837.49078,337.48388 851.61912,325.0942 C 865.74747,312.70449 875.22071,303.3929 900.75662,303.3929 C 900.75662,257.34273 900.75662,293.53329 900.75662,240.61853 C 869.77916,240.61853 850.98285,256.06047 836.85453,268.45016 C 822.72617,280.83985 813.25299,290.15142 787.71706,290.15142 C 762.18113,290.15142 752.70789,280.83981 738.57957,268.45016 C 724.45125,256.06049 705.65494,240.61853 674.67749,240.61853 C 643.7,240.61853 624.90378,256.06047 610.77542,268.45016 C 596.64708,280.83985 587.17385,290.15142 561.63795,290.15142 C 536.10202,290.15142 526.62879,280.83981 512.50046,268.45016 C 498.37211,256.06049 479.63419,240.61853 448.65674,240.61853 C 417.67925,240.61853 398.88302,256.06047 384.75467,268.45016 C 370.62632,280.83985 361.15308,290.15142 335.61719,290.15142 C 310.08128,290.15142 300.60804,280.83981 286.4797,268.45016 C 272.35138,256.06049 253.5551,240.61853 222.57762,240.61853 C 221.60956,240.61853 220.66255,240.58894 219.71808,240.61853 z"/>
<g id="g">
<use xlink:href="#s" x="100" y="50" width="100" height="150"/>
<use xlink:href="#s" x="300" y="50" width="100" height="150"/>
<use xlink:href="#s" x="500" y="50" width="100" height="150"/>
<use xlink:href="#s" x="700" y="50" width="100" height="150"/>
</g>
<use xlink:href="#g" transform="translate(0,350)"/>
</g>
</svg>