如何给作为CSS背景图的SVG内部path、polygon、rect添加media query规则

首先明确你的第一个疑问：可以直接在SVG文件内部嵌入媒体查询规则实现需求，你之前的写法错误在于将media query写在了行内style属性里，行内样式不支持@media规则，要把规则写在SVG内部的独立<style>标签中才会生效。

方案1：修改SVG文件，内置媒体查询 #

直接修改你作为背景图的SVG源码，加入内部样式和媒体查询，示例如下：

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <style>
    /* 小屏下隐藏指定多边形 */
    @media (max-width: 992px) {
      .hide-on-mobile {
        display: none;
      }
    }
  </style>
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
  <!-- 给需要隐藏的元素加对应类名 -->
  <polygon class="hide-on-mobile" points="150,10 40,108 190,78 10,78 160,198" style="fill:blue;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

注意：SVG作为图片加载时，内部的媒体查询判断的是SVG本身的渲染尺寸，而非页面视口尺寸，如果需要匹配页面视口宽度，用方案2更稳妥。

方案2：CSS媒体查询切换不同背景图 #

如果不想修改SVG源码，可以准备两个版本的SVG（完整版和隐藏指定元素的精简版），通过CSS媒体查询给伪元素切换不同的背景图地址即可，示例如下：

/* 默认大屏用完整版SVG */
.element::before {
  content: '';
  display: block;
  background: url('full.svg') no-repeat center;
  width: 500px;
  height: 210px;
}

/* 小屏切换为精简版SVG */
@media (max-width: 992px) {
  .element::before {
    background: url('cut.svg') no-repeat center;
  }
}

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