CODEWITHSUNDEEP
internet-explorersvg
scottctr
scottctr

Reputation: 803

IE 11 not recognizing SVG translate

I'm generating the following SVG code at run time and it renders fine in Chrome, but in IE 11 the translate is being ignored.

I've tried moving the width, height, viewBox, and transform attributes down to the first 'g' element with no success. 

<html><head></head><body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 75" width="32px" height="75px" version="1.1" transform="translate(4, 35)">
	<g fill="none" stroke="none" stroke-width="1">
		<path stroke="#333333" stroke-width="1" transform="translate(0 -3)" d="M 0.5 3.7895 L 0.5 35.5 L 12.8536 35.5 L 16.4461 38.7895 L 20.3642 35.5 L 31.5 35.5 L 31.5 3.7895 L 0.5 3.7895 Z" />
			<text id="55" font-family="NotoSans-Bold, Noto Sans" font-size="14" font-weight="bold" fill="#333333">
				<tspan x="12" y="21">1</tspan>
			</text>
			<rect class="slider-handle" style="fill: rgb(23, 119, 207);" x="12" y="44" width="10" height="24" rx="1" viewBox="0 0 10 24" />     
	</g>
</svg>
</body></html>

I'm not getting any error messages, but the svg isn't transitioning its position as expected in IE11.

Upvotes: 1

Views: 1087

Answers (2)

RAC
RAC

Reputation: 156

Rather than having a transform attribute, put the transform into the style attribute instead. This should work.

Upvotes: 2

Robert Longson
Robert Longson

Reputation: 124059

IE does not support the transform attribute on <svg> elements because that feature is new in SVG 2 and IE really only supports SVG 1.1

You could move the transform to the <g> child of the <svg> element, IE would recognise it there but you'd also need to alter the viewBox now that the transform is only applied to the child of the <svg> element.

<html><head></head><body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 35 32 75" width="32px" height="75px" version="1.1">
	<g fill="none" stroke="none" stroke-width="1"  transform="translate(4, 35)">
		<path stroke="#333333" stroke-width="1" transform="translate(0 -3)" d="M 0.5 3.7895 L 0.5 35.5 L 12.8536 35.5 L 16.4461 38.7895 L 20.3642 35.5 L 31.5 35.5 L 31.5 3.7895 L 0.5 3.7895 Z" />
			<text id="55" font-family="NotoSans-Bold, Noto Sans" font-size="14" font-weight="bold" fill="#333333">
				<tspan x="12" y="21">1</tspan>
			</text>
			<rect class="slider-handle" style="fill: rgb(23, 119, 207);" x="12" y="44" width="10" height="24" rx="1" />     
	</g>
</svg>
</body></html>

Upvotes: 3

Related Questions