时间戳

首页 > 解决方案 > SVG 线性渐变填充适用于桌面视图，但不适用于移动设备。我怎样才能解决这个问题？

css - SVG 线性渐变填充适用于桌面视图，但不适用于移动设备。我怎样才能解决这个问题？

问题描述

所以我有一个使用 React 和 Express 制作的网站的徽标。SVG 路径是从在桌面和移动组件中调用的函数返回的。这是我的 default.css（代表默认样式，适用于移动设备和桌面设备，我只是在这里更改颜色内容。

svg {
    fill: url(#logo-gradient);
}
#logo-gradient {
    --color-stop-1: rgba(242, 68, 132, 1);
    --color-stop-2: rgba(237, 136, 173, 1);
    --color-stop-3: #fbbed4;

}

以下是它在桌面视图上运行良好的方式：桌面

不适用于移动设备：

手机1

但是，如果我fill: red;按预期在移动设备上使用它，当然会显示为红色： 移动红

我不知道可能出了什么问题，它应该可以工作。任何帮助，将不胜感激！

编辑：响应“somethinghere”，我认为包含 svg 代码是无关紧要的，因为它是由函数返回的，并且在移动和桌面组件上都调用了相同的函数......但这里是：

getLogo = () => {
    return   (
        <svg
        viewBox="0 0 250 50"
        width="250"
        height="50"
        version="1.1"
        id="svg3785">
            <defs>
                <linearGradient id="logo-gradient">
                    <stop offset="0%" stop-color="var(--color-stop-1)" />
                    <stop offset="77%" stop-color="var(--color-stop-2)" />
                    <stop offset="100%" stop-color="var(--color-stop-3)" />
                </linearGradient>
            </defs>
            <path d="M 17.699219 8.7597656  ... really long path"/>
        </svg>
    )
}

在组件中（仅包括父 div）：

<div className="logo-container">
    {this.getLogo()}
</div>

对于手机：

<div className="nav-resp-logo-container">
    {this.getLogo()}
</div>

标签： cssreactjssvggradientfill

解决方案

我已尝试将您的代码简化为可测试的代码，并且这一切似乎在我的终端上都可以正常工作：

:root {
  --g1: red;
  --g2: green;
  --g3: blue;
}

#definitions {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-100%,-100%);
  opacity: 0;
  pointer-events: none;
}
#logo text {
  fill: url(#logo-gradient);
}
<svg
    viewBox="0 0 250 50"
    width="250"
    height="50"
    id="definitions"
    xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="logo-gradient">
            <stop offset="0%" stop-color="var(--g1)" />
            <stop offset="77%" stop-color="var(--g2)" />
            <stop offset="100%" stop-color="var(--g3)" />
        </linearGradient>
    </defs>
</svg>
<svg
    id="logo"
    viewBox="0 0 250 50"
    width="250"
    height="50"
    xmlns="http://www.w3.org/2000/svg">
    <text x="0" y="40" style="font-size: 40px; font-weight: bold;">Hello World</text>
</svg>

这意味着您的问题可能不在您向我们展示的代码中。也许徽标不小心隐藏在手机上？你在什么浏览器上测试这个？哪些设备？

我能给你的唯一建议是确保你有一个已定义XMLNS的或 XML 命名空间。如果你不这样做，某些浏览器上可能会发生一些奇怪的事情——主要是较旧的浏览器。因此，请确保您的<svg>标签至少包含以下内容：

xmlns="http://www.w3.org/2000/svg"

推荐阅读