Firefox中独立于CSS/HTML结构的SVG文本被截断

页面通过验证器，适用于IE9和Chrome。但我无能为力，为什么文本在Firefox中被切断？我尝试过使用CSS，改变标签的宽度和高度（没做任何事情），改变了标签的绝对位置（仍然在相同的位置切断），几乎尝试了任何HTML /明智的CSS。Firefox中独立于CSS/HTML结构的SVG文本被截断

截图： http://i44.tinypic.com/10qjp5t.png

来源

2012-04-16 pbond

给svg元素的宽度和两个集height属性为100％。

来源

2012-04-17 07:20:12

给予宽度和高度确实有效！谢谢。你也碰巧知道为什么菜单页面不能用doctype工作，但是在firefox和IE浏览器中都不工作？ – pbond 2012-04-17 13:42:27

Nvm开始用Rafael JS库替换所有内容以实现跨浏览器兼容性。 – pbond 2012-04-17 16:33:09

添加属性“background-size”，并为其指定SVG图像的宽度和高度值，如下所示：background-size：（width）px（height）px;因此，如果您的SVG的宽度为100px，高度为50px，请在CSS中为SVG使用以下规则： background-size：100px 40px;

此外，为了增加对旧的浏览器，定义了一个回退为png背景的CSS的SVG背景之前，你的SVG，以下列方式（并序）：背景：网址（fallback_image.png）不重复; background：url（svg_image.svg）no-repeat;

这是可行的，因为大多数支持SVG的浏览器都支持多种背景，因此后面的背景（SVG）也会被应用。如果浏览器不支持SVG，它将只使用第一个背景（非SVG）。

来源：http://css-tricks.com/using-svg

来源

2014-06-29 16:07:13

Firefox中独立于CSS/HTML结构的SVG文本被截断

回答

相关问题