Что за странный пробел в некоторых углах в моем тексте SVG? - PullRequest
Новая
       80

Что за странный пробел в некоторых углах в моем тексте SVG?

0 голосов
/ 06 апреля 2020

Я тестирую SVG-анимацию с помощью этого выделенного текста, который я создал в Illustrator. Вот анимация, над которой я работаю.

https://jsfiddle.net/kaguraichi123/4rkucmL7/3/

Во-первых, я заметил этот пробел в некоторых углах, как на рисунке ниже.

enter image description here

Итак, я поставил это CSS. 

svg{
    stroke-linecap: square;
}

Мне удалось как-то заполнить пробелы, но единственное письмо, которое было фиксированный B, я предполагаю, что это потому, что угол поворота был 90 градусов. Другие буквы A, R и N теперь имеют ломаные углы, как вы можете видеть на изображении внизу.

enter image description here

Мой вопрос: что вызывая этот разрыв в первую очередь? Кроме того, есть ли способ исправить эти пробелы? Я хочу, чтобы буква типа A имела острые и четкие углы.

Большое спасибо.

(Edit1) Это изображение показывает, где изначально находится этот разрыв. Обратите внимание, что буква «B» выглядит хорошо в jsfiddle из-за свойства CSS «stroke-linecap: square».

enter image description here

(Edit2) Используя следующее свойство CSS, 

svg{
    stroke-linecap: round;
}

вы получите результат ниже. Как видите, соответствующие углы теперь круглые, и я хочу, чтобы у них были острые углы, как у других.

enter image description here

1 Ответ

0 голосов
/ 06 апреля 2020

Линейный колпачок square соединит концы строк только для линий, которые встречаются под прямым углом, из которого в вашем примере состоит только буква B.

Попробуйте 

svg{
    stroke-linecap: round;
}

для более плавных результатов.

...