Поиск в Поддержке

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Learn More

SVG path element not working in FF 6.06 but works in all other browsers and validated by the W3C service

  • 9 ответов
  • 1 имеет эту проблему
  • 15 просмотров
  • Последний ответ от SimonTomlin

more options

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>
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 <pre><nowiki><?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></nowiki></pre>

Изменено cor-el

Выбранное решение

I think this file violates 2 syntaxrules from the SVG 1.1 SE.

  1. The separator for a drawto statement is ws* not comma-wsp
  2. The elliptical-arc-argument does not allow negativ numbers

See http://www.w3.org/TR/SVG11/paths.html#PathDataBNF

Прочитайте этот ответ в контексте 👍 0

Все ответы (9)

more options

Выбранное решение

I think this file violates 2 syntaxrules from the SVG 1.1 SE.

  1. The separator for a drawto statement is ws* not comma-wsp
  2. The elliptical-arc-argument does not allow negativ numbers

See http://www.w3.org/TR/SVG11/paths.html#PathDataBNF

more options

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.

See http://forums.mozillazine.org/viewforum.php?f=25

more options

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

more options

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' />
more options

Thank you for the reference I am sure it will come in handy if I have problems with the SMIL animation code

more options

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.

more options

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

Изменено SimonTomlin

more options

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.

more options

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