文章/答案/技术大牛

发布

社区首页 >问答首页 >IE 11无法识别SVG转换

问IE 11无法识别SVG转换
EN

Stack Overflow用户

提问于 2019-08-20 07:42:15

回答 2查看 996关注 0票数 1

我在运行时生成了以下SVG代码，它在Chrome中渲染得很好，但在IE11中，翻译被忽略了。

我尝试将width、height、viewBox和transform属性下移到第一个'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

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-20 07:58:52

IE不支持<svg>元素上的transform属性，因为该功能是new in SVG 2，而IE实际上只支持SVG1.1

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

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

票数 3

Stack Overflow用户

发布于 2019-08-20 16:28:26

不是使用转换属性，而是将转换放入样式属性中。这应该是可行的。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57565111

复制

相似问题

问IE 11无法识别SVG转换
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE 11无法识别SVG转换EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE 11无法识别SVG转换
EN