Question

以下的SVG代码在Chrome，Firefox，Opera，Safari和IE11中呈现得很好（尽管IE11出于某种原因在一个小盒子中呈现mentioned before）：

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

然而，当将视图框设置为viewBox="0 0 1 1"并相应地缩小所有SVG值时，它在Chrome，Firefox和Opera中显示正常（除了字体大小的微小变化），但IE11显示奇怪的错位文本，Safari似乎不尊重font-size属性并显示巨大的文本：

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

请注意，两个代码块中路径的ID不同。我不知道为什么，我找不到任何关于它的东西，但IE11显然要求每条路径都有一个唯一的ID，即使这两条路径在不同的元素中也是如此。

这似乎仅在使用A（rc）运算符时在IE11中发生。使用bezier C（urve）工作正常。但是，我还没有测试过其他路径运算符。

这是IE11 / Safari中的错误还是SVG在这些情况下根本不支持浮点数？

无论哪种方式，我都可以简单地确保我只在我的SVG中使用int来处理这些事情，但我想确保没有其他事情发生。

编辑：我已将Safari字体大小问题跟踪到this bug，该问题被视为已解决，但可以再次重现。我已要求重新开放。

SVG文本路径与IE11中的路径未对齐，并且Safari中的字体大小不正确

0 个答案: