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 Mullany所建议的，您可以用一个等效的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>