IE 11 无法识别 SVG 翻译答案

【问题标题】：IE 11 not recognizing SVG translateIE 11 无法识别 SVG 翻译
【发布时间】：2019-12-25 04:01:14
【问题描述】：

我在运行时生成以下 SVG 代码，它在 Chrome 中呈现良好，但在 IE 11 中，翻译被忽略。

我尝试将宽度、高度、视图框和变换属性向下移动到第一个“g”元素，但没有成功。

<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>

我没有收到任何错误消息，但 svg 未按预期在 IE11 中转换其位置。

【问题讨论】：

标签： internet-explorer svg

【解决方案1】：

IE 不支持 <svg> 元素上的 transform 属性，因为该特性是 new in SVG 2 而 IE 确实只支持 SVG 1.1

您可以将变换移动到 <svg> 元素的 <g> 子元素，IE 会在那里识别它，但您还需要更改 viewBox，因为变换仅应用于 @987654325 的子元素@元素。

<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>

【讨论】：

【解决方案2】：

与其拥有transform属性，不如将transform放入style属性中。这应该可以。

【讨论】：

这实际上是我们最终做的。尽管罗伯特回答了我提出的问题，但实际上并没有解决问题。不过 CSS 效果很好。