javascript - i 和 svg 的 CSS 问题

Question

我有两种形状。一个图标来自Font Awesome，另一个直接来自 SVG。

我使用相同的 CSS 内容 for<i>和 for<svg>并且我已尽一切可能确保我不会错过 SVG 的任何内容，但我们的工具提示对于<i>.

在<svg>.

这是我的代码。在这你可以看到。

HTML

<div id="demo-widget" class="demo-position-right demo-button-list">
    <div id="sy-whatshelp">
        <div class="sywh-services active" style="width:33px">

             <a target="_blank" href="https://www.youtube.com/user/https://www.gravatar.com/avatar" class="youtube" data-tooltip="Youtube" data-placement="left" style="display: inline;">
                 <i style="line-height: 33px; width: 33px; height: 33px;margin-top: 4px;margin-bottom: 4px;" class="fa fa-youtube"></i>
              </a>

             <a target="_blank" href="tel: " class="call" data-tooltip="Call" data-placement="leftsvg2" style="display: inline;">
                 <svg width="33px" height="33px" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(0deg);margin-top: 0px;margin-bottom: 0px;"><circle class="color-element" cx="19.4395" cy="19.4395" r="19.4395" fill="#03E78B"></circle><path d="M19.3929 14.9176C17.752 14.7684 16.2602 14.3209 14.7684 13.7242C14.0226 13.4259 13.1275 13.7242 12.8292 14.4701L11.7849 16.2602C8.65222 14.6193 6.11623 11.9341 4.47529 8.95057L6.41458 7.90634C7.16046 7.60799 7.45881 6.71293 7.16046 5.96705C6.56375 4.47529 6.11623 2.83435 5.96705 1.34259C5.96705 0.596704 5.22117 0 4.47529 0H0.745882C0.298353 0 5.69062e-07 0.298352 5.69062e-07 0.745881C5.69062e-07 3.72941 0.596704 6.71293 1.93929 9.3981C3.87858 13.575 7.30964 16.8569 11.3374 18.7962C14.0226 20.1388 17.0061 20.7355 19.9896 20.7355C20.4371 20.7355 20.7355 20.4371 20.7355 19.9896V16.4094C20.7355 15.5143 20.1388 14.9176 19.3929 14.9176Z" transform="translate(9.07179 9.07178)" fill="white"></path></svg>
             </a>
             <a target="_blank" href="https://facebook.com/https://www.gravatar.com/avatar" class="facebook" data-tooltip="Facebook" data-placement="left" style="display: inline;"><i style="line-height: 33px; width: 33px; height: 33px;margin-top: 4px;margin-bottom: 4px;" class="fa fa-facebook"></i></a>
             <a target="_blank" href="https://web.whatsapp.com/send?phone=919840868420&amp;text=I%20need%20help" class="whatsapp" data-tooltip="WhatsApp" data-placement="leftsvg2" style="display: inline;"><svg class="ico_d" width="33px" height="33px" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(0deg);margin-top: 4px;margin-bottom: 4px;"><circle class="color-element" cx="19.4395" cy="19.4395" r="19.4395" fill="#49E670"></circle><path d="M12.9821 10.1115C12.7029 10.7767 11.5862 11.442 10.7486 11.575C10.1902 11.7081 9.35269 11.8411 6.84003 10.7767C3.48981 9.44628 1.39593 6.25317 1.25634 6.12012C1.11674 5.85403 2.13001e-06 4.39053 2.13001e-06 2.92702C2.13001e-06 1.46351 0.83755 0.665231 1.11673 0.399139C1.39592 0.133046 1.8147 1.01506e-06 2.23348 1.01506e-06C2.37307 1.01506e-06 2.51267 1.01506e-06 2.65226 1.01506e-06C2.93144 1.01506e-06 3.21063 -2.02219e-06 3.35022 0.532183C3.62941 1.19741 4.32736 2.66092 4.32736 2.79397C4.46696 2.92702 4.46696 3.19311 4.32736 3.32616C4.18777 3.59225 4.18777 3.59224 3.90858 3.85834C3.76899 3.99138 3.6294 4.12443 3.48981 4.39052C3.35022 4.52357 3.21063 4.78966 3.35022 5.05576C3.48981 5.32185 4.18777 6.38622 5.16491 7.18449C6.42125 8.24886 7.39839 8.51496 7.81717 8.78105C8.09636 8.91409 8.37554 8.9141 8.65472 8.648C8.93391 8.38191 9.21309 7.98277 9.49228 7.58363C9.77146 7.31754 10.0507 7.1845 10.3298 7.31754C10.609 7.45059 12.2841 8.11582 12.5633 8.38191C12.8425 8.51496 13.1217 8.648 13.1217 8.78105C13.1217 8.78105 13.1217 9.44628 12.9821 10.1115Z" transform="translate(12.9597 12.9597)" fill="#FAFAFA"></path><path d="M0.196998 23.295L0.131434 23.4862L0.323216 23.4223L5.52771 21.6875C7.4273 22.8471 9.47325 23.4274 11.6637 23.4274C18.134 23.4274 23.4274 18.134 23.4274 11.6637C23.4274 5.19344 18.134 -0.1 11.6637 -0.1C5.19344 -0.1 -0.1 5.19344 -0.1 11.6637C-0.1 13.9996 0.624492 16.3352 1.93021 18.2398L0.196998 23.295ZM5.87658 19.8847L5.84025 19.8665L5.80154 19.8788L2.78138 20.8398L3.73978 17.9646L3.75932 17.906L3.71562 17.8623L3.43104 17.5777C2.27704 15.8437 1.55796 13.8245 1.55796 11.6637C1.55796 6.03288 6.03288 1.55796 11.6637 1.55796C17.2945 1.55796 21.7695 6.03288 21.7695 11.6637C21.7695 17.2945 17.2945 21.7695 11.6637 21.7695C9.64222 21.7695 7.76778 21.1921 6.18227 20.039L6.17557 20.0342L6.16817 20.0305L5.87658 19.8847Z" transform="translate(7.7758 7.77582)" fill="white" stroke="white" stroke-width="0.2"></path></svg></a></div>
             <a id="sywh-open-services" style="line-height: 33px; width: 33px; height: 33px;margin-top: 4px;margin-bottom: 4px;" class="sywh-open-services data-tooltip-hide" "="" data-tooltip="Contact Us" data-placement="left"><i class="fa fa-comments" style="line-height: 33px; display: none;"></i><i class="fa fa-times" style="line-height: 33px; display: inline;"></i></a>
    </div>

我们的 CSS 内容

#sy-whatshelp {
  right: 25px;
  bottom: 25px;
  position: fixed;
  z-index: 9999;
}

#sy-whatshelp a {
  position: relative;
}

#sy-whatshelp a.sywh-open-services {
  background-color: #129bf4;
  color: #fff;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  font-size: 23px;
  width: 55px;
  height: 55px;
  text-align: center;
  box-shadow: 2px 2px 8px -3px #000;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  display: inline-block;
}

#sy-whatshelp a.sywh-open-services i {
  line-height: 55px;
}

#sy-whatshelp a.sywh-open-services svg {
  line-height: 55px;
}

#sy-whatshelp a.sywh-open-services i.fa-times {
  display: none;
}

#sy-whatshelp .sywh-services {
  width: 55px;
  height: auto;
}

#sy-whatshelp .sywh-services a {
  display: none;
}

#sy-whatshelp .sywh-services a i, #sy-whatshelp .sywh-services a svg{
  background-color: #129bf4;
  color: #fff;
  line-height: 55px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  font-size: 23px;
  width: 55px;
  height: 55px;
  text-align: center;
  box-shadow: 2px 2px 8px -3px #000;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
}


a[data-tooltip] {
  position: relative;
}

a[data-tooltip]::before,
a[data-tooltip]::after {
  position: absolute;
  display: none;
  opacity: 0.85;
  transition: all 0.3s ease-in-out;
}

a[data-tooltip]::before {
  content: attr(data-tooltip);
  background: #000;
  color: #fff;
  font-size: 13px;
  padding: 7px 11px;
  border-radius: 5px;
  white-space: nowrap;
  text-decoration: none;
}

a[data-tooltip]::after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: "";
}

a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
  display: block;
}

a.sywh-open-services[data-tooltip]::before,
a.sywh-open-services[data-tooltip]::after {
  display: block;
}

a.data-tooltip-hide[data-tooltip]::before,
a.data-tooltip-hide[data-tooltip]::after {
  display: none !important;
}

a.sywh-open-services[data-tooltip][data-placement="left"]::before {
  top: 11px;
}

a[data-tooltip][data-placement="left"]::before {
  top: -7px;
  right: 100%;
  line-height: normal;
  margin-right: 10px;

}

a[data-tooltip][data-placement="left"]::after {
  border-left-color: #000;
  border-right: none;
    top: -7px;
  right: 100%;
    margin-top: 9px;
  margin-right: 4px;
}

这是现场演示，您可以查看。在左下角，单击图标，您可以看到所有<i>项目都正确显示其工具提示，但 SVG 项目未正确显示。我们希望它与大小无关。例如，现在我有宽度和高度为 33 像素的小图标，工具提示在元素中工作正常<i>，但在元素中不起作用<svg>。

如果我将大小更改为 50 像素的宽度和高度，那么工具<i>提示也会显示在中心，因此<i>无论图标的大小如何，工具提示都会很好地显示，但<svg>不会很好地显示。

有时它会上升，有时它会下降。

https://itsneotpras.myshopify.com/

标签： javascripthtmlcsssvg