Internet explorer SVG文本路径与IE11中的路径不对齐,Safari中的字体大小不正确
以下SVG代码在Chrome、Firefox、Opera、Safari和IE11中呈现良好(尽管IE11出于某种原因呈现在一个小框中,该框已被修改): 请注意,两个代码块中的路径ID不同。我不知道为什么,也找不到任何关于它的信息,但IE11显然要求每条路径都有一个唯一的ID,即使这两条路径位于不同的元素中 这似乎只在IE11中使用A(rc)操作符时发生。使用贝塞尔C(urve)很好。不过,我还没有测试过其他路径操作符 这是IE11/Safari中的一个bug,还是SVG在这些情况下不支持浮点数 无论哪种方式,我都可以简单地确保在我的SVG中只对这些内容使用INT,但我希望确保没有其他事情发生Internet explorer SVG文本路径与IE11中的路径不对齐,Safari中的字体大小不正确,internet-explorer,svg,safari,internet-explorer-11,Internet Explorer,Svg,Safari,Internet Explorer 11,以下SVG代码在Chrome、Firefox、Opera、Safari和IE11中呈现良好(尽管IE11出于某种原因呈现在一个小框中,该框已被修改): 请注意,两个代码块中的路径ID不同。我不知道为什么,也找不到任何关于它的信息,但IE11显然要求每条路径都有一个唯一的ID,即使这两条路径位于不同的元素中 这似乎只在IE11中使用A(rc)操作符时发生。使用贝塞尔C(urve)很好。不过,我还没有测试过其他路径操作符 这是IE11/Safari中的一个bug,还是SVG在这些情况下不支持浮点数
编辑:我已经跟踪了Safari字体大小问题,该问题被认为已经解决,但显然可以再次复制。我已经请求重新打开它。SVG规范允许在这种情况下使用浮点数。注意:
document.getElementByID()
返回单个元素,因此所有ID在同一页面上都必须是唯一的,如果有冲突,它将返回找到的第一个ID。噢!我的错。我一度认为Chrome和Firefox只是在寻找同一元素中定义的ID。当然,情况并非如此。
<svg width="100%" height="100%" viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath" d="
M 100,200
A 150,200 0 0,1 450,500"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" stroke-width="1" />
<text font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath">
The wheels of the bus go round and round
</textPath>
</text>
</svg>
<svg width="100%" height="100%" viewBox="0 0 5 5"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath2" d="
M 1,2
A 1.5,2 0 0,1 4.5,5"/>
</defs>
<use xlink:href="#MyPath2" fill="none" stroke="red" stroke-width="0.01" />
<text font-family="Verdana" font-size="0.425">
<textPath xlink:href="#MyPath2">
The wheels of the bus go round and round
</textPath>
</text>
</svg>