Javascript i和svg的CSS问题

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

我对

和

使用了相同的CSS内容，并且我已经尽一切可能小心地确保我不会错过SVG的任何内容，但是对于

，我们的工具提示非常好

如果出现

，图标就不好用了

这是我的密码。从这里你可以看到

HTML 这是一个现场演示，您可以查看。在左下角，单击图标，您可以看到所有

项目都正确显示其工具提示，但SVG项目没有正确显示。我们希望它独立于大小。例如，现在我有宽度和高度为33像素的小图标，工具提示在

元素中可以正常工作，但在

元素中不起作用

如果我将大小更改为（比如）50像素的宽度和高度，那么

工具提示也会显示在中间，因此

工具提示会很好地显示，而不管图标大小如何，但是

不会很好地显示

有时会上升，有时会下降

---

@RobertLongson我的问题不是为了回答。我想是因为你的帮助。学习是最棒的feeling@RobertLongson我尝试在svg之前和之后插入，但似乎不起作用。你能猜出原因吗？@RobertLongson当我将鼠标放在svg上时，我可以看到：before和：：after被插入生成的html中，根据这个线程，罪魁祸首似乎是jquery工具提示或双引号。我试着引用一句话，这个问题已经解决了吗？我似乎找不到你正在处理的问题。@Yovabo不在那里。

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

#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;
}