为什么svg路径不起作用?

时间:2017-09-22 06:57:29

标签: svg

我有一个带路径的简单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

1 个答案:

答案 0 :(得分:3)

路径位于屏幕左上角。向下和向右平移路径允许查看它,或者你可以在svg元素上设置一个viewBox,例如viewBox =&#34; -100 -100 200 200&#34;。我已在下面显示了翻译选项。

我也让svg更宽一些,因此形状适合视口。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

我不确定为什么其他UA会展示您的原始图纸,我认为他们不应该这样做。

相关问题