Bug on to capture SVG with Tailwing class

[anatoliy-t7]

Bug on to capture SVG chart

Expected Behavior

Current Behavior

Possible Solution

Steps To Reproduce

<svg class="overflow-visible [paint-order:stroke]" x="0" y="4">
	<text x="0" y="0" transform=" " text-anchor="middle" class="text-4xl fill-black dark:fill-gray-100">
		<tspan x="0" dy="5.68">
			9
		</tspan>
	</text>
</svg>

Class overflow-visible from tailwind not captured

.overflow-visible {
	overflow: visible;
}

Additional Context

For test:

<svg
	role="figure"
	width="260"
	height="260"
	class="layercake-layout-svg absolute top-0 left-0 overflow-visible">
	<defs></defs>
	<g
		class="layercake-layout-svg_g"
		transform="translate(0, 0)">
		<g transform="translate(130, 130)">
			<g class="">
				<path
					d="M1.476,-124.832A5,5,0,0,1,6.736,-129.825A130,130,0,1,1,-38.074,124.3A5,5,0,0,1,-41.308,117.809L-24.168,70.719A5,5,0,0,1,-18.172,67.6A70,70,0,1,0,6.045,-69.739A5,5,0,0,1,1.476,-74.72Z"
					transform="translate(0, 0)"
					_offset="0"
					style="fill: rgb(255, 32, 86)"></path>
				<svg
					class="overflow-visible [paint-order:stroke]"
					x="0"
					y="0">
					<text
						x="98.4807753012208"
						y="17.364817766693037"
						transform=" "
						text-anchor="middle"
						class="fill-white font-bold stroke-black"
						style="">
						<tspan
							x="98.4807753012208"
							dy="5.68">
							55.6%
						</tspan>
					</text>
				</svg>
			</g>

			<g class="">
				<path
					d="M-44.083,116.799A5,5,0,0,1,-50.732,119.692A130,130,0,0,1,-6.736,-129.825A5,5,0,0,1,-1.476,-124.832L-1.476,-74.72A5,5,0,0,1,-6.045,-69.739A70,70,0,0,0,-29.532,63.465A5,5,0,0,1,-26.943,69.709Z"
					transform="translate(0, 0)"
					_offset="0"
					style="fill: rgb(0, 201, 81)"></path>
				<svg
					class="overflow-visible [paint-order:stroke]"
					x="0"
					y="0">
					<text
						x="-98.48077530122082"
						y="-17.364817766693"
						transform=" "
						text-anchor="middle"
						class="fill-white font-bold stroke-black"
						style="">
						<tspan
							x="-98.48077530122082"
							dy="5.68">
							44.4%
						</tspan>
					</text>
				</svg>
			</g>

			<g class="">
				<path
					d="M0,-130L0,-70Z"
					transform="translate(0, 0)"
					_offset="0"
					style="fill: rgb(43, 127, 255)"></path>
			</g>

			<g class="">
				<path
					d="M0,-130L0,-70Z"
					transform="translate(0, 0)"
					_offset="0"
					style="fill: rgb(253, 154, 0)"></path>
			</g>

			<svg
				class="overflow-visible [paint-order:stroke]"
				x="0"
				y="4">
				<text
					x="0"
					y="0"
					transform=" "
					text-anchor="middle"
					class="text-4xl fill-black dark:fill-gray-100">
					<tspan
						x="0"
						dy="5.68">
						9
					</tspan>
				</text></svg
			><svg
				class="overflow-visible [paint-order:stroke]"
				x="0"
				y="26">
				<text
					x="0"
					y="0"
					transform=" "
					text-anchor="middle"
					class="text-sm fill-gray-500 dark:fill-gray-300">
					<tspan
						x="0"
						dy="5.68">
						total
					</tspan>
				</text>
			</svg>
		</g>
	</g>
</svg>

Your Environment

• "html-to-image": "^1.11.13",
• OS: [e.g. macOS 15.3.1]
• Browser: [e.g. chrome 133.0.6943.98]
• chart [https://www.layerchart.com/docs/components/PieChart]
• tailwind 3
• svelte 5

[biiibooo[bot]]

👋 @anatoliy-t7

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[nwoltman]

html-to-image is ignoring SVG classes. Here's the solution: https://github.com/BricksInc/html-to-image/commit/5c52978c13ae1c2071fc5e4d884507b470725162

[whistleEmil]

Is this by choice or considered a bug (if you know @nwoltman)? Also running into this and it causes images to be frustrating to work with

[nwoltman]

@whistleEmil I'd consider it a bug. It seems like it was there as a performance optimization but that created the bug, so it makes more sense to remove the optimization.