Javascript 为什么CSS中的SVG片段标识符在操作onclick时不被呈现？_Javascript_Html_Css_Svg

Javascript 为什么CSS中的SVG片段标识符在操作onclick时不被呈现？

javascript html css svg

Javascript 为什么CSS中的SVG片段标识符在操作onclick时不被呈现？,javascript,html,css,svg,Javascript,Html,Css,Svg,我有一个SVG图像精灵，由复选框的两种状态组成。我在SVG文件中创建了两个组ID，这样我就可以通过单击片段标识符来更改SVG viewBox 当我尝试将类名切换为“checked”时，它不会将复选框重新呈现为正确的状态，除非我执行了强制重新绘制的操作（例如调整窗口大小）这适用于Firefox，但不适用于Chrome（v56）。我可以通过改变显示器使其工作：；属性，但只是好奇这里到底发生了什么在这里玩代码笔： HTML <html> <body> <di

我有一个SVG图像精灵，由复选框的两种状态组成。我在SVG文件中创建了两个组ID，这样我就可以通过单击片段标识符来更改SVG viewBox

当我尝试将类名切换为“checked”时，它不会将复选框重新呈现为正确的状态，除非我执行了强制重新绘制的操作（例如调整窗口大小）

这适用于Firefox，但不适用于Chrome（v56）。我可以通过改变显示器使其工作：；属性，但只是好奇这里到底发生了什么

在这里玩代码笔：

HTML

<html>
<body>
    <div class="check" id="check">
        Click me
    </div>
    <p>Then, resize the viewport</p>
</body>
</html>

var el = document.getElementById("check");
el.addEventListener("click", toggleCheck);

function toggleCheck(){
  el.classList.toggle("checked");
}

显然问题在于

背景位置

属性

要解决此问题而不更改

显示

属性，请更改两个类之一中的背景位置

两个类不能共享相同的

背景位置

值

示例：

在您的

.checked

课程中，包括：

  background-position: 10.01px center;

var el=document.getElementById（“检查”）；
el.addEventListener（“单击”，切换检查）；
函数toggleCheck（）{
el.classList.toggle（“选中”）；
}

。检查{
背景：url（“https://s3-eu-west-1.amazonaws.com/static.musomatt.com/misc/checkbox.svg#unchecked）10px中心不重复/18px；
左侧填充：40px；
光标：指针；
}
.检查{
背景图像：url（“https://s3-eu-west-1.amazonaws.com/static.musomatt.com/misc/checkbox.svg#checked");
背景位置：10.01px中心；
}


点击我

  background-position: 10.01px center;