SVG path element not working in FF 6.06 but works in all other browsers and validated by the W3C service
Hi, I am writing a game using SVG and for some reason the path element is not dispaying in FF 6.06.
It follows SVG 1.1 as per the W3C documentation and works in every other browser I have tried even IE9. It must be something simple but I cannot find it. It is validated ok by the w3c validation service. Here is the URL and also the source.
http://www.ironagegames.com/iasb350bc/help/SVGTests/MyMan.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600" > <g transform='translate(100,0)'> <!--<rect x='0' y='0' height='60' width='20' style='stroke:red;fill:none;stroke-width:1px;' />--> <circle cx='10' cy='5' r='4' style='stroke:none; fill:BurlyWood;' /> <path d='m 2 10, l 16 0, a 2 4 0 0 1 2 4, l 0 18, c 0 2, -3 2, -3 0, l 0 -18, -2 0, 0 40, c 0 2, -4 2, -4 0, l 0 -22, l -2 0, 0 22, c 0 2, -4 2, -4 0, l 0 -40, -2 0, 0 18, c 0 2, -3 2, -3 0, l 0 -18, a 2 -4 0 0 1 2 -4' style='stroke:none; fill:BurlyWood;' /> <path d='m 2 10, l 16 0, a 2 4 0 0 1 2 4, l 0 4, -3 0, 0 -4, -2 0, 0 18, -10 0, 0 -18, -2 0, l 0 4, -3 0, 0 -4, a 2 -4 0 0 1 2 -4' style='stroke:none; fill:#8B7355;' /> </g> <g transform='translate(100,0)'> <!--Med Spear <path d='m -10 55, l 0 -40' style='stroke:SaddleBrown; fill:none;stroke-width:1px;'/> <path d='m -11 18, l 1 -3, 1 3, z' style='stroke:grey; fill:grey;'/> --> <!-- SHORT JAV --> <path d='m -6 55, l 0 -18' style='stroke:SaddleBrown; fill:none;stroke-width:0.5px;'/> <path d='m -7 37, l 1 -2, 1 2, z' style='stroke:none; fill:grey;'/> <path d='m -3 55, l 0 -18' style='stroke:SaddleBrown; fill:none;stroke-width:0.5px;'/> <path d='m -4 37, l 1 -2, 1 2, z' style='stroke:none; fill:grey;'/> <path d='m -0 55, l 0 -18' style='stroke:SaddleBrown; fill:none;stroke-width:0.5px;'/> <path d='m -1 37, l 1 -2, 1 2, z' style='stroke:none; fill:grey;'/> <!-- Body Shield --> <path d='m 24 10, c 2 -1, 10 -1, 12 0, c -1 2, -1 22, 0 24, c -2 1, -10 1, -12 0, c 1 -2, 1 -22, 0 -24' style='stroke:grey; fill:SaddleBrown;stroke-width:2px;stroke-linecap:round;'/> <!--Short Sword --> <path d='m -10 15, l 0 -5' style='stroke:SaddleBrown; fill:none;stroke-width:1px;'/> <path d='m -12 15, l 4 0' style='stroke:grey; fill:none;stroke-width:1px;'/> <path d='m -10 30, l 0 -15' style='stroke:grey; fill:none;stroke-width:2px;'/> <path d='m -9 30, l -1 2, -1 -2, z' style='stroke:none; fill:grey;'/> </g> </svg>
Изменено
Выбранное решение
I think this file violates 2 syntaxrules from the SVG 1.1 SE.
- The separator for a drawto statement is ws* not comma-wsp
- The elliptical-arc-argument does not allow negativ numbers
See http://www.w3.org/TR/SVG11/paths.html#PathDataBNF
Все ответы (9)
Выбранное решение
I think this file violates 2 syntaxrules from the SVG 1.1 SE.
- The separator for a drawto statement is ws* not comma-wsp
- The elliptical-arc-argument does not allow negativ numbers
A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.
I have tested this with a local file. If I remove all illegal characters, Firefox will display it normally and there are no more error messages in the errorconsole.
For example:
path d='m -4 37, l 1 -2, 1 2, z'
Here the first and the last comma are illegal.
path d=' ..... a 2 -4 0 0 1 2 -4'
Here the second number should be non-negative for a "a" command
Yep your right, the comma between statement was the problem and it can only be a space.
I did not think it mattered since I thought a comma would be treated as a separator and the only reason I have them in there is purely to aid reading the code.
All the other browsers I assume just treat the comma as a space?
Anyway thank you very much in pointing it out, it was beginning to really bug me. The negatives are x y coords and not the problem since the flags are not negative. Here is the example of bad code and the corrected code. For others to see.
Naughty code
<path d='m 2 10, l 16 0, a 2 4 0 0 1 2 4, l 0 18, c 0 2, -3 2, -3 0, l 0 -18, -2 0, 0 40, c 0 2, -4 2, -4 0, l 0 -22, l -2 0, 0 22, c 0 2, -4 2, -4 0, l 0 -40, -2 0, 0 18, c 0 2, -3 2, -3 0,
l 0 -18, a 2 -4 0 0 1 2 -4'/>
Good code
<path d='m 2 30 l 16 0 a 2 4 0 0 1 2 4 l 0 18 c 0 2 -3 2, -3 0 l 0 -18, -2 0, 0 40 c 0 2, -4 2, -4 0 l 0 -22 l -2 0, 0 22 c 0 2, -4 2, -4 0 l 0 -40, -2 0, 0 18 c 0 2, -3 2, -3 0
l 0 -18 a 2 -4 0 0 1 2 -4' />
Thank you for the reference I am sure it will come in handy if I have problems with the SMIL animation code
The command "a 2 -4 0 0 1 2 -4" is giving me a warning in the errorconsole so I am not sure if you can call that good code (strictly speaking).
You are right that other browsers probably treat the comma as whitespace, but that is not allowed in the specification.
see this rule --> wsp: (#x20 | #x9 | #xD | #xA)
Firefox always respects the web standards unlike other browsers.
The negative are fine since you could not write code without them as useing lower case a makes them relative so -10 -10 just means go left 10px and up 10px. Not sure what the error in the console is.
I got this from your first post
http://www.w3.org/TR/SVG11/images/paths/arcs01.svg
This is the code from the last path element does this cause an error in your console? It has negatives - I'm just happy to have the problem solved.
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25" fill="none" stroke="red" stroke-width="5" />
Изменено
Sorry to be unclear.
I mean negatives in the first two arguments of the "a" command cause a warning.
rule:
elliptical-arc-argument: nonnegative-number comma-wsp? nonnegative-number comma-wsp? number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair
They are called rx and ry in the specification.
I don't mean negative coordinates.
OK, I am with you now and yes your right again.
Not even sure why I put negatives there, I must have misunderstood how the arcs are formed. I guess the other browsers just ignore the negative sign and use the value as a positive. Since changeing it only affects FF.
FireFox has gone from being a pain to becoming first choice for standards checking.
Thank you very much
Simon Tomlin