圆形上的SVG textPath看起来像Edge上的螺旋形吗？

Question

我正在尝试使某些文本适合圆形路径。在Firefox和Chrome浏览器中，这可以按预期工作，但是当我添加textLength属性（需要使它适合整个圆圈）时，Edge会使文本呈螺旋形旋转。

是否有某种方法可以解决此问题，或者有其他方法可以使文本完全合理？

（根据文字的不同，Edge中的螺旋效果会更加明显-从一点点到圆角）<​​/ p>

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="220">
        <circle fill="#eeeeee" cx="110" cy="110" r="110"/>
        <path id="textpath" stroke-width="1" stroke="#000" fill="transparent" d="M170 110c0 33.137-26.863 60-60 60s-60-26.863-60-60 26.863-60 60-60 60 26.863 60 60z"/>
        <text dy="0" textLength="370" font-size="21px" fill="#444442">
          <textPath xlink:href="#textpath">Reviews * Reviews * Reviews * Reviews *</textPath>
        </text>
    </svg>

Answer 1

尝试更改“ dy”属性和“ textLength”属性，修改代码如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="220">
    <circle fill="#eeeeee" cx="110" cy="110" r="110" />
    <path id="textpath" stroke-width="1" stroke="#000" fill="transparent" d="M170 110c0 33.137-26.863 60-60 60s-60-26.863-60-60 26.863-60 60-60 60 26.863 60 60z" />
    <text dy="-5" textLength="372" font-size="21px" fill="#444442">
        <textPath xlink:href="#textpath">Reviews * Reviews * Reviews * Reviews *</textPath>
    </text>
</svg>

在Edge浏览器中的结果如下：

Answer 2

我能想到的最好的答案是使用javascript检测浏览器，然后计算要使用的letter-spacing而不是textLength。

这似乎可以解决Edge中的问题。 IE有点缺了，因为它无法准确获取宽度。

if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /MSIE 10/i.test(navigator.userAgent) || /Edge\/\d./i.test(navigator.userAgent)) {
  var textCircle = document.querySelectorAll('svg');
  for(i=0; i < textCircle.length; i++) {
    circleText(i);
  };
}
function circleText(i) {
  var str = textCircle[i].querySelector('textPath').textContent;
  var test = textCircle[i].querySelector('text').cloneNode(false);
  textCircle[i].appendChild(test);
  test.appendChild(document.createTextNode(str));
  test.removeAttribute('textLength');
  var w = test.getBBox().width;
  textCircle[i].removeChild(test);
  var dif = textCircle[i].querySelector('text').getAttribute('textLength') - w;
  textCircle[i].querySelector('text').style.letterSpacing = (dif / str.length) / 21 + 'em';
  textCircle[i].querySelector('text').removeAttribute('textLength');
};