如何定位 svg 并根据选择隐藏和显示 svg答案

【问题标题】：How to position svg and to hide and show svg based on selection如何定位 svg 并根据选择隐藏和显示 svg
【发布时间】：2018-04-15 04:07:22
【问题描述】：

我有以下 jsfiddle：

https://jsfiddle.net/drc83/vn3tbovu/19/

css:

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: lato;
  color: #fff;
  background: #999;
  padding: 55px 30px;
}


.checkbox-styled {
  display: block;
  margin: 40px 0 0 0;
  float: left;
}
.checkbox-styled input[type="checkbox"] {
  display: none;
}
.checkbox-styled input[type="checkbox"] + span {
  text-transform: uppercase;
  background: #27ae60;
  color: #fff;
  font-size: 20px;
  text-align: center;
  width: 200px;
  height: 100px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  position: relative;
  padding-top: 60px;
  -moz-transition: background 0.1s ease-in;
  -o-transition: background 0.1s ease-in;
  -webkit-transition: background 0.1s ease-in;
  transition: background 0.1s ease-in;
}
.checkbox-styled input[type="checkbox"] + span:hover {
  background: #1e8449;
}
.checkbox-styled input[type="checkbox"] + span:before {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -12px;
  font-size: 55px;
  display: block;
  content: ":)";
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.checkbox-styled input[type="checkbox"] + span.sad:before {
  content: ":(";
}
.checkbox-styled input[type="checkbox"]:checked + span {
  background: #145b32;
}



.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

jquery:

$('input[type="checkbox"]').click(function(){ 
    $('input[type="checkbox"]').prop("checked", false);
    $(this).prop("checked", true);
    $('p').toggleClass('sad');
});

html:

<div>
  <label class="checkbox-styled">
    <input type="checkbox" name="happy" value="happy"/>
    <span>Happy</span>
    <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
  </label>
</div>
<div>
  <label class="checkbox-styled">
    <input type="checkbox" name="sad" value="sad" />
    <span class="sad">Sad</span>
  </label> 
</div>

它有一个自定义复选框，我还有一个 svg 动画复选标记。首先，我需要帮助将复选标记放在框内“快乐”和“悲伤”这两个词的中心。其次，我希望复选标记仅在在适当的选择下进行选择时才进行动画处理。第三，一旦动画完成，一旦动画完成，圆圈就会稍微移动一下，如果有任何帮助，我们将不胜感激。

谢谢

【问题讨论】：

嘿，你能澄清一下将它放在单词下方是什么意思吗？你能用展示位置展示你想要的模型吗
接近了吗？ jsfiddle.net/evqy155f/6

标签： javascript jquery css svg

【解决方案1】：

对不起，我从来没有用过 jquery，所以我的代码是 js，而且很粗糙（没有缓存等）

动画重置 - 我认为有一篇关于 css-tricks 的文章解释了如何做到这一点：https://css-tricks.com/restart-css-animation/

所以你可以使用相同的方法

CSS 展示位置是我通过绝对定位非常粗略地完成的，因为我不确定您的完整上下文是什么。

查看代码：

function animationReset() {
  document.getElementById('checkmark').classList.remove('checkmark');
  document.getElementById('checkmark__circle').classList.remove('checkmark__circle');
  document.getElementById('checkmark__check').classList.remove('checkmark__check');
  void document.getElementById("mainDIV").offsetWidth;
  document.getElementById('checkmark').classList.add('checkmark');
  document.getElementById('checkmark__circle').classList.add('checkmark__circle');
  document.getElementById('checkmark__check').classList.add('checkmark__check');
}

function positionChange(source) {
  if (source === "happy") {
    document.getElementById('checkmark').attributes.style.value = "display: inline; position: absolute; left: 115px; top: 180px;"
  } else {
    document.getElementById('checkmark').attributes.style.value = "display: inline; position: absolute; left: 315px; top: 180px;"
  }

}

$('input[type="checkbox"]').click(function() {
  $('input[type="checkbox"]').prop("checked", false);
  $(this).prop("checked", true);
  // anim reset:
  animationReset();
  positionChange(this.name)
  $('p').toggleClass('sad');
});

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: lato;
  color: #fff;
  background: #999;
  padding: 55px 30px;
}

.checkbox-styled {
  display: block;
  margin: 40px 0 0 0;
  float: left;
}

.checkbox-styled input[type="checkbox"] {
  display: none;
}

.checkbox-styled input[type="checkbox"]+span {
  text-transform: uppercase;
  background: #27ae60;
  color: #fff;
  font-size: 20px;
  text-align: center;
  width: 200px;
  height: 100px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  position: relative;
  padding-top: 60px;
  -moz-transition: background 0.1s ease-in;
  -o-transition: background 0.1s ease-in;
  -webkit-transition: background 0.1s ease-in;
  transition: background 0.1s ease-in;
}

.checkbox-styled input[type="checkbox"]+span:hover {
  background: #1e8449;
}

.checkbox-styled input[type="checkbox"]+span:before {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -12px;
  font-size: 55px;
  display: block;
  content: ":)";
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.checkbox-styled input[type="checkbox"]+span.sad:before {
  content: ":(";
}

.checkbox-styled input[type="checkbox"]:checked+span {
  background: #145b32;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDIV">
  <label class="checkbox-styled">
  <input type="checkbox" name="happy" value="happy"/>
  <span>Happy</span>
</label>
</div>
<div>
  <label class="checkbox-styled">
  <input type="checkbox" name="sad" value="sad" />
  <span class="sad">Sad</span>
</label>
</div>
<svg style="display: none; position: absolute; left: 115px; top: 180px;" id="checkmark" class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle id="checkmark__circle" class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path id="checkmark__check" class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>

【讨论】：