なぜsvgパスが機能していないのですか？

Question

パスがある単純なSVGがあり、すべてのブラウザで描画されていません。どうして？

<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

パスは、画面の左上から外れています。パスを上下左右に移動するとビューが表示されますが、svg要素にviewBoxを設定することもできます。 viewBox = " - 100 -100 200 200"となります。私は以下の翻訳オプションを示しました。

私はsvgを少し広くして、形状がビューポートにフィットするようにしました。

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

私は他のUAがあなたの元の図面を表示し、なぜ、私は彼らが必要とは思わないわかりません。