Hey there, let's tackle this SVG drop shadow issue you're seeing on mobile. I've run into this exact problem before with Illustrator-exported SVGs, so here's what's going on and how to fix it:

Why This Happens #

Illustrator tends to generate overly complex, sometimes non-standard SVG filter code for drop shadows. Mobile browsers (especially older WebKit-based ones like Safari on iOS) often struggle with these proprietary or overly nested filter definitions, leading to the shadow not rendering at all.

Solution 1: Simplify the SVG's Internal Filter Code #

Open your exported SVG file in a text editor and tweak the filter directly. Here's how:

• Locate the <filter> block (usually with an id like DropShadow_1 or similar)
• Replace Illustrator's generated code with a simpler, standards-compliant drop shadow filter. For example:

  <filter id="mobile-friendly-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
    <feOffset dx="1" dy="1" result="offset-blur" />
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.5" /> <!-- Adjust shadow opacity here -->
    </feComponentTransfer>
    <feMerge>
      <feMergeNode /> <!-- Renders the shadow -->
      <feMergeNode in="SourceGraphic" /> <!-- Renders the original shape on top -->
    </feMerge>
  </filter>
  

• Update your SVG shape to reference this new filter: filter="url(#mobile-friendly-shadow)"

Solution 2: Replace SVG Shadow with CSS Filter #

If your SVG is inline in your HTML (not an external file), using CSS is often more reliable for mobile:

• Target the SVG element or its inner group with a CSS drop-shadow filter:

  .your-svg-class {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    /* Adjust values: horizontal offset, vertical offset, blur radius, color */
  }
  

• Bonus: This lets you adjust the shadow dynamically with media queries for different screen sizes.

Quick Checks to Rule Out Other Issues #

• Make sure your SVG doesn't have overflow: hidden set on the root <svg> element—this can clip the shadow.
• When exporting from Illustrator, choose SVG 1.1 (not SVG Tiny or other specialized formats) and uncheck "Preserve Illustrator Editing Capabilities" to strip unnecessary code.
• Test on newer mobile browsers first—if it works there, you might need a fallback (like a PNG version) for very old iOS/Android devices.

内容的提问来源于stack exchange，提问作者Logan C