Warum Svg-Pfad funktioniert nicht?

Question

Ich habe ein einfaches SVG mit einem Pfad, und es zeichnet nicht in allen Browsern. Warum?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="85.56" height="120"><path fill="white" stroke="black" d="M20.88-84C21.96-88.56 19.44-90.60 15.12-90.60C10.08-90.60 5.76-88.08 1.68-84.84C-0.72-82.92 0.12-79.20 1.68-78.24C2.76-79.20 3.48-79.68 4.08-79.68C5.16-79.68 5.76-78.60 5.28-76.68L-4.56-30.60C-3.12-29.64-1.08-29.04 1.08-29.04C5.40-29.04 9.96-31.08 11.16-36.60L18.48-70.80C21.72-74.64 25.20-77.04 29.52-77.04C33.48-77.04 33.24-73.80 32.40-69.96L24-30.60C25.44-29.64 27.48-29.04 29.64-29.04C33.96-29.04 38.52-31.08 39.72-36.60L47.16-71.52C50.28-74.88 53.52-77.04 57.60-77.04C61.56-77.04 61.44-73.80 60.48-69.96L55.44-46.08C52.44-32.04 58.80-29.04 64.80-29.04C72.84-29.04 80.88-34.56 86.52-40.92C87.24-41.76 87.60-42.72 87.60-43.56C87.60-44.76 86.88-45.84 85.56-46.44C82.56-43.44 77.40-40.44 72.96-40.44C70.56-40.44 69-41.88 69.72-45.36L75.60-72.96C78.72-87 70.92-90.60 65.52-90.60C58.56-90.60 52.56-85.44 47.52-78.24C47.88-86.76 42.36-90.60 37.44-90.60C30.60-90.60 24.60-85.68 19.68-78.60Z"/></svg> 

jsfiddle

Answer 1

Der Weg ist von der oberen linken Ecke des Bildschirms. Wenn der Pfad nach unten und rechts übersetzt wird, kann er angezeigt werden. Alternativ können Sie eine ViewBox auf dem SVG-Element z. viewBox = "- 100 -100 200 200". Ich habe die Übersetzungsoption unten gezeigt.

Ich habe auch die Svg ein wenig breiter gemacht, so dass die Form in das Ansichtsfenster passt.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="120" ><path transform="translate(7,100)" fill="white" stroke="black" d="M20.88-84C21.96-88.56 19.44-90.60 15.12-90.60C10.08-90.60 5.76-88.08 1.68-84.84C-0.72-82.92 0.12-79.20 1.68-78.24C2.76-79.20 3.48-79.68 4.08-79.68C5.16-79.68 5.76-78.60 5.28-76.68L-4.56-30.60C-3.12-29.64-1.08-29.04 1.08-29.04C5.40-29.04 9.96-31.08 11.16-36.60L18.48-70.80C21.72-74.64 25.20-77.04 29.52-77.04C33.48-77.04 33.24-73.80 32.40-69.96L24-30.60C25.44-29.64 27.48-29.04 29.64-29.04C33.96-29.04 38.52-31.08 39.72-36.60L47.16-71.52C50.28-74.88 53.52-77.04 57.60-77.04C61.56-77.04 61.44-73.80 60.48-69.96L55.44-46.08C52.44-32.04 58.80-29.04 64.80-29.04C72.84-29.04 80.88-34.56 86.52-40.92C87.24-41.76 87.60-42.72 87.60-43.56C87.60-44.76 86.88-45.84 85.56-46.44C82.56-43.44 77.40-40.44 72.96-40.44C70.56-40.44 69-41.88 69.72-45.36L75.60-72.96C78.72-87 70.92-90.60 65.52-90.60C58.56-90.60 52.56-85.44 47.52-78.24C47.88-86.76 42.36-90.60 37.44-90.60C30.60-90.60 24.60-85.68 19.68-78.60Z"/></svg>

Ich bin nicht sicher, warum andere UAs Ihre ursprüngliche Zeichnung anzuzeigen, ich glaube nicht, sie sollten.