jquery - SVG 元素背景颜色

Question

我有一个 <svg>带有 <path> 的元素它应该绘制一条与我网站的页脚颜色相同的灰色填充曲线(见图)。

问题是背景中显示的浅灰色，它应该是白色的。

我已经尝试了所有我能想到的 CSS 样式，但并不愉快。这是浏览器问题吗？

我正在插入 <svg>和 <path>使用 jQuery 的 Squarespace 6 托管模板(非开发人员模式)上的元素。

编辑:在运行 10.9.4 的 Mac 上，灰色出现在 Firefox 31.0 中，但不在 Chrome 37.0.2062.68 或 Safari 7.0.5 中。在运行 iOS 7.1.2 的 iPhone 和 iPad 上，灰色出现在 Safari for iOS 和 Chrome 36.0.985.49 中。

编辑 #2:当我移动 <svg> 时元素到页面上的其他位置，相关背景变为白色。

非常感谢任何想法。

问候，

和风

注:现场直播可在http://www.intuitivebythesea.com查看

---

_{(来源:squarespace.com)}

<footer id="footer">
    <svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="65">
        <path d="M0 100 C 20 0 50 0 100 100 Z"></path>
    </svg>
    <div class="footer-wrapper">...</div>
</footer>

样式

/* Section Separator Styles */
    #curveUpColor path,
    #curveDownColor path {
        fill: #636363; 
        stroke: #636363;
    }
    #curveUpColor,
    #curveDownColor {
        background-color: #ffffff;
    }

Answer 1

如果您愿意，您可以使用纯 CSS 实现相同的效果:

#footer:before {
    background: none repeat scroll 0 0 #636363;
    border-radius: 100%;
    content: "";
    display: block;
    height: 50px;
    left: 0;
    position: absolute;
    top: -23px;
    width: 100%;
    z-index: 66;
}

然后修改 .back-to-top-link 的 CSS 属性

.collection-type-index .back-to-top-link {
    background-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    padding-top: 2px;
    position: absolute;
    top: -47px;
    width: 50px;
    z-index: 999;
}

结果: