Firefox中SVG defs内元素样式不生效的解决方法

这个问题其实是Firefox对SVG规范的严格遵循，和Chrome/IE相对宽松的实现之间的差异导致的——Firefox将<defs>中的元素视为未渲染的模板内容，外部父容器的选择器无法直接穿透到<defs>内部选中元素；而Chrome和IE允许这种跨上下文的选择器匹配。下面给你几个可行的解决方案：

方案1：通过<use>传递样式并设置继承 #

把样式直接应用到实际渲染的<use>元素上，然后让<defs>内的元素通过inherit继承这个样式值，所有浏览器都能正确识别：

#symbolcontainer.green use { fill: green; }

<svg>
  <g id="symbolcontainer" class="green">
    <defs>
      <g id='mysymbol'>
        <defs>
          <!-- 让圆形继承父级的fill值 -->
          <circle id="myCircle" r="2" cx="2" cy="2" fill="inherit"/>
        </defs>
        <!-- use元素同样继承fill -->
        <use href="#myCircle" fill="inherit"/>
      </g>
    </defs>
    <!-- 这个use会被CSS选中，设置fill为green -->
    <use href="#mysymbol" />
  </g>
</svg>

方案2：使用CSS变量穿透上下文 #

CSS变量可以穿透SVG的<defs>上下文，是最灵活的解决方案之一：

/* 在父容器上定义变量 */
#symbolcontainer.green { --fill-color: green; }
/* 让defs内的元素使用这个变量 */
#mysymbol, #myCircle { fill: var(--fill-color); }

<svg>
  <g id="symbolcontainer" class="green">
    <defs>
      <g id='mysymbol'>
        <defs>
          <circle id="myCircle" r="2" cx="2" cy="2"/>
        </defs>
        <use href="#myCircle"/>
      </g>
    </defs>
    <use href="#mysymbol" />
  </g>
</svg>

方案3：直接内联样式（灵活性差，不推荐） #

如果场景简单，也可以直接给<defs>内的元素设置内联样式，但这种方式不利于样式复用：

<svg>
  <g id="symbolcontainer" class="green">
    <defs>
      <g id='mysymbol'>
        <defs>
          <circle id="myCircle" r="2" cx="2" cy="2" fill="green"/>
        </defs>
        <use href="#myCircle"/>
      </g>
    </defs>
    <use href="#mysymbol" />
  </g>
</svg>

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