SVG 文本元素上的文本阴影在移动 Safari 上始终为白色......

Question

我正在将网站的主横幅从图片转换为基于 SVG 的横幅。代码基本上是这样的：

<svg fill="url(#gradient-5)" width="100%" height="100%" style="transform: scale(1);">
    <defs>
        <linearGradient id="gradient-5" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
              <stop offset="40%" stop-color="#fff"></stop>
              <stop offset="60%" stop-color="#888"></stop>
              <stop offset="69%" stop-color="#fff"></stop>
              <stop offset="100%" stop-color="#fff"></stop>
        </linearGradient>
    </defs>
    <text text-anchor="middle" x="50%" y="75%">Sample text</text>
</svg>

所以，我看到了带有原始渐变的文本。问题是原文有文字阴影，所以我用 CSS:

添加了文字阴影

.svg-main-banner text {
    text-shadow: #FF0000 0 3px;
}

但移动版Safari 上的文字阴影始终为白色。其他都可以 devices/browsers。知道为什么会这样吗？

Answer 1

正如 Michael Mullany 所建议的，您可以将 CSS 文本阴影替换为等效的 SVG 滤镜。您可以使用以下形式的 SVG 过滤器创建阴影...

<filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

只需填写半径、偏移-x、偏移-y 和颜色值。在您的示例中，SVG 代码将变为...

<svg fill="url(#gradient-5)" width="100%" height="100%" style="transform: scale(1);">
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur in="SourceAlpha" stdDeviation="0"/>
            <feOffset dx="0" dy="3" result="offsetblur"/>
            <feFlood flood-color="#FF0000"/>
            <feComposite in2="offsetblur" operator="in"/>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
        <linearGradient id="gradient-5" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
              <stop offset="40%" stop-color="#fff"></stop>
              <stop offset="60%" stop-color="#888"></stop>
              <stop offset="69%" stop-color="#fff"></stop>
              <stop offset="100%" stop-color="#fff"></stop>
        </linearGradient>
    </defs>
    <text text-anchor="middle" x="50%" y="75%" filter="url(#drop-shadow)">Sample text</text>
</svg>

SVG 文本元素上的文本阴影在移动 Safari 上始终为白色......

Text shadow on SVG text element is always white on mobile Safari ...

safari

svg

text

shadow