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上的文本阴影始终是白色的。在所有其他设备/浏览器上都可以。知道为什么会这样吗？

Answer 1

正如Michael所建议的，您可以用一个等效的SVG过滤器来替换CSS文本阴影。您可以使用表单的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>