gpt4 book ai didi

javascript - 如何准确对齐复选标记 svg 图像旁边的文本,以便将其用作优缺点?

转载 作者:太空宇宙 更新时间:2023-11-04 06:15:22 25 4
gpt4 key购买 nike

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

我得到的结果-

Text below svg image

我想要的结果-

text beside 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 编辑器中进行编辑。请尽可能缩小代码

最佳答案

<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>

关于javascript - 如何准确对齐复选标记 svg 图像旁边的文本,以便将其用作优缺点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56019625/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com