SVG元素背景颜色答案

【问题标题】：SVG element background colorSVG元素背景颜色
【发布时间】：2021-10-10 01:54:46
【问题描述】：

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

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

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

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

编辑：在运行 10.9.4 的 Mac 上，灰色出现在 Firefox 31.0 中，但不在 Chrome 37.0.2062.68 或 Safari 7.0.5 中。在运行 iOS 7.1.2 的 iPhone 和 iPad 上，灰色存在在 iOS 版 Safari 和 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;
    }

【问题讨论】：

我可以观察到白色（铬），你的浏览器是什么
@AshishBalchandani ：我只是用该信息更新问题！在运行 10.0.4 的 Mac 上，灰色出现在 Firefox 31.0、iOS 版 Safari 中，但在 Chrome 37.0.2062.68 或 Safari 7.0.5 中没有。
很奇怪。这可能是浏览器中的绘画错误。在您的示例中，我似乎无法将任何路径或形状设为真正的白色 (#ffffff)。
@Axel - 好的，那么我没有遗漏一些明显的东西？
我看不到。我会尝试将 SVG 元素放在一个完全空白的文档中，看看是否会出现相同的结果。这样您就可以消除任何干扰代码的可能性。

标签： jquery css svg background path

【解决方案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;
}

结果：

【讨论】：

哇。我非常倾向于 - 我更喜欢仅使用 CSS 进行样式设置。让我试试看。
请参阅上面的原始问题的解决方案。我非常感谢您的时间，并且真的很喜欢您的解决方案更好，但需要学习如何进一步自定义示例 - 我以前没有使用 CSS 来绘制对象。我的客户更喜欢偏移曲线，而不是居中曲线。

【解决方案2】：

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

罪魁祸首是：

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

这创造了我所看到的“阴影”。至少可以说令人沮丧。

我非常感谢@Axel 提供了另一种优雅的解决方案，并让我走上了通往这一发现的道路。

【讨论】：