如何让SVG样式属性优先级高于CSS？无法修改CSS及SVG文件

Great question! You absolutely can make your SVG's native fill and stroke attributes take priority over the unmodifiable external CSS without altering the SVG file or existing stylesheet. Here's a clean, no-hack approach:

Core Method: Use CSS attr() to Reference SVG's Own Attributes #

The key is to create a CSS rule that explicitly pulls the values from the SVG's intrinsic fill and stroke attributes, and applies them with higher specificity than the external CSS. This way, you're not redefining styles—you're just telling the browser to respect the SVG's original properties.

Step-by-Step Implementation: #

1. Add a custom class to your SVG element:

   <svg class="preserve-svg-native-styles" fill="#2ecc71" stroke="#34495e" viewBox="0 0 100 100">
     <!-- Your existing SVG content here -->
   </svg>
   

   (The class name can be anything you prefer—just pick something descriptive.)

2. Add this CSS rule to your page:

   .preserve-svg-native-styles {
     /* Pull fill value directly from the SVG's fill attribute */
     fill: attr(fill);
     /* Pull stroke value directly from the SVG's stroke attribute */
     stroke: attr(stroke);
     /* Optional: Include stroke-width if that's also being overridden */
     stroke-width: attr(stroke-width);
   }
   

Why This Works: #

• Presentation attributes (like SVG's fill and stroke) have lower specificity than regular CSS rules. By creating a class-based CSS rule that references the SVG's own attributes, we're creating a selector with higher specificity than most generic external CSS rules (e.g., svg { ... } or .some-parent svg { ... }).
• The attr() function reads the exact value from the SVG's attribute, so you don't have to manually redefine any colors or styles—you're just preserving the SVG's original settings.

Handling Higher-Specificity External CSS #

If the external CSS uses a more specific selector (e.g., .page-header svg), simply adjust your selector to match or exceed that specificity:

.page-header .preserve-svg-native-styles {
  fill: attr(fill);
  stroke: attr(stroke);
}

Avoid using !important unless absolutely necessary—specificity is the cleaner solution.

Compatibility #

This method works in all modern browsers (Chrome, Firefox, Safari 15.4+, Edge) that support the attr() function for color and length values.

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