SVG路径<path>的d属性报错：结尾为数字却提示「Unexpected end of attribute. Expected number」的原因咨询

Let’s break down your problem clearly—this has nothing to do with letters or your id attribute, and the error message is pointing exactly to where the real issue lies.

The Core Problem: Your Path Is Incomplete #

Looking at your d attribute’s final segment:

M24.0004,5 C13.5064,5 5.0004,13.507 5.0004 

The C command (cubic Bézier curve) requires three full coordinate pairs to work:

1. First control point (13.5064,5)
2. Second control point (5.0004,13.507)
3. The end point of the curve (you only wrote 5.0004—missing the matching y-value!)

The SVG parser sees 5.0004 and expects a second number to complete the coordinate pair, but the d attribute ends abruptly. That’s why it throws the "Unexpected end of attribute" error—it’s not saying 5.0004 is a letter, just that it stopped getting the numbers it needed right at that spot.

Does the id Attribute Cause This? #

Absolutely not. The id="Color" is just an identifier for your path element and has zero impact on how the SVG parser reads the d attribute. The error points to 5.0004 simply because that’s where the parser hit an incomplete command before the attribute ended.

How to Fix It #

You need to finish the curve command properly. For example, if you were trying to draw a full circle (given the starting point M24.0004,5), you’d complete the C command and wrap up the path. Here’s a corrected version:

<path d=" M31.9004,21.79 L24.9004,29.79 C24.6704,30.05 24.3494,30.2 24.0004,30.2 C23.6504,30.2 23.3304,30.05 23.0994,29.79 L16.0994,21.79 C15.6604,21.29 15.7104,20.53 16.2104,20.1 C16.7104,19.66 17.4694,19.71 17.9004,20.21 L24.0004,27.18 L30.0994,20.21 C30.5304,19.71 31.2904,19.66 31.7904,20.1 C32.2904,20.53 32.3394,21.29 31.9004,21.79 M24.0004,5 C13.5064,5 5.0004,13.507 5.0004,24.0004 C5.0004,34.4944 13.5064,43.0004 24.0004,43.0004 C34.4944,43.0004 43.0004,34.4944 43.0004,24.0004 C43.0004,13.507 34.4944,5 24.0004,5 Z" id="Color" ></path>

Here, we added the missing y-value (24.0004) to complete the first C command, finished the rest of the circle’s curve commands, and used Z to close the path cleanly.

内容的提问来源于stack exchange，提问作者IWI