IE 11 无法识别 SVG 翻译
Posted
技术标签:
【中文标题】IE 11 无法识别 SVG 翻译【英文标题】：IE 11 not recognizing SVG translate 【发布时间】：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" version="1.1" transform="translate(4, 35)">
<g fill="none" stroke="none" stroke->
<path stroke="#333333" stroke- 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" rx="1" viewBox="0 0 10 24" />
</g>
</svg>
</body></html>我没有收到任何错误消息，但 svg 未按预期在 IE11 中转换其位置。
【问题讨论】：
【参考方案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" version="1.1">
<g fill="none" stroke="none" stroke- transform="translate(4, 35)">
<path stroke="#333333" stroke- 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" rx="1" />
</g>
</svg>
</body></html>【讨论】：
【参考方案2】：与其拥有transform属性，不如将transform放入style属性中。这应该可以。
【讨论】：
这实际上是我们最终做的。尽管罗伯特回答了我提出的问题，但实际上并没有解决问题。不过 CSS 效果很好。以上是关于IE 11 无法识别 SVG 翻译的主要内容，如果未能解决你的问题，请参考以下文章