-1

I'm testing svg animation with this outlined text that I created in Illustrator. Here is the animation I'm working on.

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

First, I noticed this gap in some corners like the one in the image below.

enter image description here

So I put this CSS.

svg{
    stroke-linecap: square;
}

I managed to fill the gaps somehow, but the only letter that's been fixed is B, I'm assuming it's because the corder was 90 degrees. The other letters A, R and N, now have broken corners, as you can see in the image down below.

enter image description here

My question is, what's causing this gap in the first place? Also, is there any way to fix these gaps? I want the letter such as A to have sharp and crisp corners.

Thank you very much.

(Edit1) This image shows where this gap is located originally. Please note that the letter "B" looks fine in jsfiddle because of the CSS property "stroke-linecap: square".

enter image description here

(Edit2) With the following CSS property,

svg{
    stroke-linecap: round;
}

you get the result down below. As you can see, the corresponding corners are round now, and I want them to have sharp corners like the others.

enter image description here

Ryo
  • 75
  • 8
  • Looks fine to me. What are you using to display the SVG? – Robert Longson Apr 06 '20 at 06:24
  • There is also stroke-linejoin property. Try to use it – Yurii Kovalenko Apr 06 '20 at 07:58
  • @RobertLongson What I did was make the text in Illustrator and export it as svg and copy and paste the code in HTML. – Ryo Apr 06 '20 at 12:24
  • @YuriiKovalenko Thank you for your input. I put the property in the second path(letter "A") in HTML, you can check it in the jsfiddle link in the post. Unfortunately, it didn't solve the issue. – Ryo Apr 06 '20 at 12:26
  • I've updated my post to show exactly where there's this problem. Please take a look at the image at the bottom. – Ryo Apr 06 '20 at 12:27

1 Answers1

0

The square linecap will fuse line ends only for lines that meet in a right angle, which in your example only the letter B is composed of.

Try 

svg{
    stroke-linecap: round;
}

for smoother results.

collapsar
  • 17,010
  • 4
  • 35
  • 61
  • Thank you very much. Yes, I've tried this property as well, and I find it smooth from the distance. However, if you take a closer look at the corners, you find them round because of the property, which is not what I'm aiming for. I've updated my post with a new image to show what I meant. (Edit2) Thank you again. – Ryo Apr 06 '20 at 19:40