iOS 16.4.1中SVG引用CSS变量失效问题求助

方案1：在外部SVG中定义变量并通过父元素传递 #

在外部SVG文件（svg_css_test.svg）的根<svg>标签内添加<style>块，定义默认CSS变量：

<svg xmlns="http://www.w3.org/2000/svg" id="test">
  <style>
    :root {
      --circle_color: #000; /* 设置默认颜色 */
    }
  </style>
  <circle style="fill:var(--circle_color);stroke:none;" cx="18.520834" cy="6.6145835" r="5.2916665" />
</svg>

然后在HTML的<svg>标签中直接设置变量，传递给内部的<use>引用：

<svg style="--circle_color: #ff0000;">
  <use href="svg_css_test.svg#test"></use>
</svg>

此方法利用父<svg>的样式上下文传递变量，适配iOS 16.4.1的隔离规则。

方案2：使用<object>标签嵌入并通过JS传递变量 #

用<object>替代<use>加载外部SVG，再通过JavaScript将HTML中的CSS变量注入到SVG内部：

<object id="svg-object" data="svg_css_test.svg#test" type="image/svg+xml" style="width: 50px; height: 50px;"></object>

添加JS代码处理变量传递：

const svgObject = document.getElementById('svg-object');
svgObject.addEventListener('load', function() {
  const svgDoc = this.contentDocument;
  const circleColor = getComputedStyle(document.documentElement).getPropertyValue('--circle_color');
  const styleEl = document.createElementNS('http://www.w3.org/2000/svg', 'style');
  styleEl.textContent = `:root { --circle_color: ${circleColor}; }`;
  svgDoc.querySelector('svg').appendChild(styleEl);
});

这种方式绕过了<use>的样式隔离问题，确保变量能正确作用到SVG元素。

方案3：AJAX加载SVG作为内联模板复用 #

通过AJAX加载外部SVG内容，将其插入页面的<template>中，之后用<use>引用模板内的内容，既保持复用性又能正常使用CSS变量：

fetch('svg_css_test.svg')
  .then(res => res.text())
  .then(svgContent => {
    const template = document.createElement('template');
    template.innerHTML = svgContent;
    document.body.appendChild(template.content);
  });

之后HTML中直接引用内联的SVG片段：

<svg>
  <use href="#test"></use>
</svg>

此方法相当于动态实现了内联SVG的效果，同时保留了外部文件的维护便利性。

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