html - 绝对定位div内的SVG不显示

标签 html google-chrome firefox svg absolute

这适用于 Firefox,但不适用于 Chrome。我希望有人能找到解决方法。 我需要内部 div 绝对定位(这似乎导致了问题)。

http://jsfiddle.net/UK6Lb/

<body>
   <div style="width: 550px; height: 400px; background-color: rgb(0, 142, 0);">
      <div style="position: absolute;">
            <svg>
               <rect width="40" height="40" fill="#666666"></rect>
            </svg>
      </div>
   </div>
</body>

最佳答案

指定 SVG 的宽度和高度。

<svg width="40" height="40">

或者实际上任何大于 40 的值都可以

<svg width="400" height="400">

关于html - 绝对定位div内的SVG不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18925638/

相关文章:

html - 两个模板,一个按钮有透明背景,另一个没有

google-chrome - 从扩展内获取 Chrome 选项卡的窗口句柄?

javascript - 正则表达式在 Chrome 中有效,但在 Firefox 中出错

javascript - 使用窗口打印方法打印页面时 Google chrome 卡住

css - 为什么我的线性渐变在 Firefox 中不起作用?

javascript - Firefox 重新加载页面循环调试提示?

javascript - 悬停并放大时,获取较小的图像以完整质量加载

javascript - 如何在触发另一个 click() 时清除 click()?

javascript - 如何使用 HTML AGILITY PACK 调用 Click

android - Android 版 Chrome 拒绝呈现自定义字体