访问嵌入式SVG图形链接后实现持久变色的问题

为什么你的:visited样式不生效？ #

浏览器出于隐私保护的目的，对:visited伪类的CSS属性做了严格限制：

• 仅允许修改颜色相关属性（如color、background-color），SVG的fill、opacity这类属性不在允许修改的范围内；
• :visited只能作用于<a>、<area>这类链接元素本身，无法直接作用于内部的<path>标签；
• 你尝试的#path_bc:visited选择器完全无效，因为<path>不是链接元素；即使写a:visited path，也会因为浏览器的隐私限制，无法修改fill或opacity。

另外，你代码里的<path>初始opacity="0"，虽然hover时能显示，但建议先调整为opacity="1"保证初始可见性。

可行的解决方案 #

方案1：后端标记已访问状态（推荐） #

通过后端记录用户已完成的调查，渲染页面时给对应的<a>标签添加自定义类，再用CSS控制样式，这是最可靠的方法，不受浏览器限制。

修改模板代码：

<!-- 假设后端通过变量user_completed_bc判断是否完成该调查 -->
<a href='{% url 'introduction' %}' {% if user_completed_bc %}class="visited"{% endif %}>
  <path id="path_bc" fill="#027aff" stroke="none" opacity="1" d="M 210.919983 80.78241 C 210.919983 61.452454 195.249954 45.78241 175.920013 45.78241 C 156.590012 45.78241 140.919983 61.452454 140.919983 80.78241 C 140.919983 100.112366 156.590012 115.78241 175.920013 115.78241 C 195.249954 115.78241 210.919983 100.112366 210.919983 80.78241 Z"/>
</a>

添加对应CSS：

/* 已访问样式 */
a.visited path {
  fill: red;
  opacity: .5;
}

/* 保留你的hover样式 */
#path_cm:hover, #path_rm:hover, #path_is:hover, #path_bc:hover, #path_hr:hover, #path_ict:hover, 
#path_sc:hover, #path_fa:hover, #path_env:hover, #path_hs:hover, #path_em:hover, #path_center:hover {
  opacity: .5;
  stroke: blue;
  stroke-opacity: 1;
  stroke-width: 5
}

方案2：前端用localStorage标记（适合无需跨设备同步的场景） #

如果不需要后端参与，可在用户完成调查后，用localStorage记录状态，回到选择页面时读取状态并添加样式类。

1. 在调查完成的页面添加JS：

// 假设当前调查标识为'bc'，完成后存入localStorage
localStorage.setItem('survey_bc_completed', 'true');

2. 在选择页面添加JS：

window.addEventListener('load', () => {
  // 检查是否完成bc调查
  if (localStorage.getItem('survey_bc_completed')) {
    // 找到对应链接并添加visited类
    const bcLink = document.querySelector('a[href="{% url 'introduction' %}"]');
    if (bcLink) bcLink.classList.add('visited');
  }
  // 其他调查同理，重复上述逻辑
});

3. 同样使用方案1中的a.visited path CSS样式即可。

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