[英]SVG rect not showing up in firefox but works on chrome
I am drawing a simple two rectangle svg as follows: 我正在绘制一个简单的两个矩形svg,如下所示:
<svg width="72px" height="72px" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<rect stroke-dashoffset="0" x="2.4px" y="2.4px"></rect>
<rect ng-class="$ctrl.expiryClass"
x="2.4px" y="2.4px"
stroke-dasharray={{$ctrl.dashlength}}
stroke-dashoffset={{$ctrl.offset}}></rect>
</svg>
This works well in chrome and looks like this: 这适用于chrome,看起来像这样:
However, the svg is not showing up in FireFox and I am only seeing the purple 2h
box. 然而,svg没有出现在FireFox中,我只看到紫色的
2h
盒子。 Any idea whats going on? 有什么想法吗?
I expect you are setting the rectangle's width
and height
using CSS. 我希望你使用CSS设置矩形的
width
和height
。 Correct? 正确?
If so, that's an SVG 2 thing that currently only works in Chrome. 如果是这样,这是SVG 2的东西,目前只适用于Chrome。 You'll need to use regular
width
and height
attributes if you want this to be cross-browser compatible. 如果您希望跨浏览器兼容,则需要使用常规的
width
和height
属性。
<rect stroke-dashoffset="0" x="2.4px" y="2.4px" width="100px" height="100px"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.