时间戳

首页 > 解决方案 > 如何在复选标记 svg 图像旁边精确对齐文本，以便将其用作优缺点？

javascript - 如何在复选标记 svg 图像旁边精确对齐文本，以便将其用作优缺点？

问题描述

我在 SVG 图像下方获取文本，但我想将其移动到 SVG 图像旁边，以便它可以用作这样的优缺点部分：-

我得到的结果-

svg图片下方的文字

我想要的结果——

svg旁边的文字

这是代码：- HTML

<html>
<head>
<!--[if lte IE 9]>
  <style>
    .path {stroke-dasharray: 0 !important;}
  </style>
<![endif]-->

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
</svg>
<p class="success">Oh Yeah!</p>
</head>
</html>

CSS

<style>
svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  &.circle {
    -webkit-animation: dash .9s ease-in-out;
    animation: dash .9s ease-in-out;
  }
  &.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash .9s .35s ease-in-out forwards;
    animation: dash .9s .35s ease-in-out forwards;
  }
  &.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
    animation: dash-check .9s .35s ease-in-out forwards;
  }
}

p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
  &.success {
    color: #73AF55;
  }
  &.error {
    color: #D06079;
  }
}


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

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

@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
</style>

注意 请注意，动画持续时间是无限的，意味着总是循环播放。将代码粘贴到 codepen 编辑器中进行编辑。请尽可能缩小代码

标签： javascripthtmlcssimagesvg

解决方案

将这两个元素包裹在其中<div></div>并使用 css 给display : inline-block那里的子元素。

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
  
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  &.circle {
    -webkit-animation: dash .9s ease-in-out;
    animation: dash .9s ease-in-out;
    animation-iteration-count: infinite;
  }
  &.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash .9s .35s ease-in-out forwards;
    animation: dash .9s .35s ease-in-out
      forwards;
    animation-iteration-count: infinite;
  }
  &.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
    animation: dash-check .9s .35s ease-in-out forwards;
    animation-iteration-count: infinite;
  }
}

p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
  &.success {
    color: #73AF55;
  }
  &.error {
    color: #D06079;
  }
}


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

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

@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

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


.success_message{
  display: inline-block !important;
  margin: 0px 15px;
  height: 100px;
  line-height: 100px;
  position: absolute;    
}

.success_icon{
  display: inline-block !important;
  margin:0px !important;
}

.success_container{
  text-align : center;  
}
<html>
<head>
<!--[if lte IE 9]>
  <style>
    .path {stroke-dasharray: 0 !important;}
  </style>
<![endif]-->
 
</head>
<body>
    <div class="success_container">
    <svg class="success_icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
    <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
    <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
  </svg>
  <p class="success_message">Oh Yeah!</p>
 </div>
</body>
</html>

推荐阅读