SVG元素背景颜色

Question

我有一个带有<svg>的{​​{1}}元素，它应该绘制一条填充曲线，颜色与我网站的页脚颜色相同（见图片）。

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

我尝试过每一种我都能想到的CSS风格，没有任何乐趣。这是浏览器问题吗？

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

编辑：在运行10.9.4的Mac上，Chrome 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：当我将<path>元素移动到页面上的其他位置时，相关背景变为白色。

非常感谢任何想法。

问候，

西风

注意：可以在http://www.intuitivebythesea.com

查看实际网站

---

<svg>

样式

<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>

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;
}

结果：

Answer 2

确定。我发现了这个问题 - 正如所指出的那样，问题在于主页上的一个冲突元素 - 一个专为视差导航设计的模板。

罪魁祸首是：

.content.has-main-image { 
    box-shadow: 0px 0px 75px rgba(0, 0, 0, 0.1);
}

创造了＆＃34;影子＆＃34;我看到。至少可以说是沮丧。

我不能说感谢@Axel提供了另一种优雅的解决方案，让我走上了通向这一发现的道路。