IE11中SVG加载图标无法正常显示问题求助

Hey there! Let's figure out why your SVG loading spinner works in Chrome but not IE11—even though IE9+ claims to support SVG, there are several common pitfalls that can break rendering. Let's go through the most likely issues and fixes based on your code snippet:

1. Incomplete SVG Syntax (The #1 Culprit for IE11) #

Looking at your code, the viewBox attribute cuts off mid-value (viewBox="0 0 1...) and your SVG/HTML tags aren't fully closed. IE11 has way less tolerance for incomplete or malformed markup than modern browsers—even a missing closing tag or truncated attribute can make the entire SVG disappear.

Fix:

• Ensure your SVG has a complete, valid viewBox (e.g., viewBox="0 0 100 100" to define the full coordinate system).
• Close all tags properly (your sample code is missing closing </svg>, </div>, </body>, and </html> tags).

2. Unsupported CSS Animation Features #

Most loading spinners rely on CSS animations, and IE11 has limited support for certain CSS properties:

• It doesn't support CSS variables (var()), so if your SVG uses those for colors/sizes, IE11 will ignore them.
• It requires vendor prefixes for some transform/animation properties (like -ms-transform instead of just transform).
• transform-origin with percentage values can behave unexpectedly in IE11 for SVG elements.

Fix Example:
If your spinner uses a rotation animation, update your CSS to include IE11-compatible syntax:

<style>
  @-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .lds-spinner {
    -ms-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
  }
</style>

3. Issues with SVG References (e.g., <use> Tags) #

If your SVG uses <use> to reuse elements, IE11 only recognizes the xlink:href attribute (not the modern href alone).

Fix:
Include both attributes for compatibility:

<use xlink:href="#spinner-segment" href="#spinner-segment"></use>

4. Inline Style Conflicts #

IE11 sometimes struggles with inline styles on SVG elements. If your spinner parts have inline style attributes, moving those styles to an internal <style> block inside the SVG can help.

Quick Test:
Save your complete SVG as a standalone .svg file and open it directly in IE11. If it renders correctly there, the issue is with how it's embedded in your HTML (e.g., missing namespaces or conflicting page styles). If it still doesn't render, the SVG itself has compatibility issues.

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