SVG textPath на круге выглядит как спираль на краю? - PullRequest
Новая
       24

SVG textPath на круге выглядит как спираль на краю?

0 голосов
/ 23 мая 2019

Я пытаюсь, чтобы какой-то текст помещался по кругу.Это работает, как и ожидалось, в Firefox и Chrome, но Edge превращает текст в спираль, когда я добавляю атрибут textLength (который необходим, чтобы он соответствовал полному кругу).

Есть ли способ исправитьэто или другой способ сделать текст полностью оправданным?

(Эффект спирали в Edge более выражен в зависимости от текста - от небольшого обрыва до дикого отклонения от круга) 

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

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

Лучший ответ, который я мог придумать, это использовать 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');
};
0 голосов
/ 23 мая 2019

Попробуйте изменить свойство "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, как показано ниже:

enter image description here

...