为什么在点击操作时不会呈现 CSS 中的这个 SVG 片段标识符？答案

【问题标题】：Why does this SVG fragment identifier in CSS not get rendered when manipulated onclick?为什么在点击操作时不会呈现 CSS 中的这个 SVG 片段标识符？
【发布时间】：2017-03-16 10:13:00
【问题描述】：

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

当我尝试将类名切换为“已选中”时，它不会将复选框重新呈现为正确的状态，除非我采取措施强制重新绘制（例如调整窗口大小）。

这适用于 Firefox，但不适用于 Chrome (v56)。我可以通过更改显示来使其工作：; “检查”类中的属性，但只是好奇这里到底发生了什么。

Codepen 在这里玩： https://codepen.io/anon/pen/evGWPj

HTML

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

CSS

.check {
  background-image:url("https://s3-eu-west-1.amazonaws.com/static.musomatt.com/misc/checkbox.svg#unchecked");
  background-size:18px;
  background-position:10px center;
  background-repeat: no-repeat;
  padding-left:40px;
  cursor:pointer;
}

.checked {
  background-image:url("https://s3-eu-west-1.amazonaws.com/static.musomatt.com/misc/checkbox.svg#checked");
}

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

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

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

显然问题出在background-position 属性上。

要在不更改display 属性的情况下解决此问题，请更改两个类之一中的背景位置。

这两个类不能共享相同的background-position 值。

示例：

在您的.checked 课程中包括：

  background-position: 10.01px center;

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

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

.check {
  background: url("https://s3-eu-west-1.amazonaws.com/static.musomatt.com/misc/checkbox.svg#unchecked") 10px center no-repeat / 18px;
  padding-left: 40px;
  cursor: pointer;
}

.checked {
  background-image: url("https://s3-eu-west-1.amazonaws.com/static.musomatt.com/misc/checkbox.svg#checked");
  background-position: 10.01px center;
}

<div class="check" id="check">
  Click me
</div>

【讨论】：