调试!SVG logo &提示错误

Debugging! SVG logo & tooltip bug

本文关键字:提示 错误 logo SVG 调试      更新时间:2023-09-26

我是编辑和嵌入SVG到网页的新手。我的客户是一个平面设计师,所以他为他的网站创建了一个svg徽标,并希望我将其嵌入到他的导航栏。

我也在使用Bootstrap,作为开发的一部分,我使用Bootstrap工具提示。然而,一旦我嵌入svg并通过viewbox编辑坐标,我就遇到了一个工具提示的问题。

这个特殊的徽标的工具提示似乎有bug。其余的都还好,但由于某种原因,我不知道如何修复这个。

我今天已经上传了网站用于测试目的,您可以在http://edizorac.com/上看到问题

有问题的标志是在导航栏的第二个,你也可以通过web检查器看到我的代码。

任何帮助/建议是感激的!!

Thanks in advance:)

更新:

对于给您带来的不便,我深表歉意。svg代码如下:
<li>
  <a href="#projects">
    <span>
        <svg version="1.2" baseProfile="tiny" x="0px" y="0px" width="70px" height="60px" viewBox="50 40 90 120" data-toggle="tooltip" title="Projects">
            <polygon fill="none" stroke="#ffffff" stroke-miterlimit="10" points="33.493,81.046 96.934,46.112 88.647,82.874 57.203,117.371 52.946,86.674 99.573,74.629 81.325,117.276 37.909,101.254"/>
            <polyline fill="none" stroke="#ffffff" stroke-miterlimit="10" points="96.451,81.928 114.361,106.172 112.365,112.871 82.791,113.852 "/>
            <line fill="none" stroke="#ffffff" stroke-miterlimit="10" x1="95.854" y1="47.473" x2="37.909" y2="101.254"/>
        </svg>
    </span>
   </a>
 </li>

我可以建议你阅读一下这个,也看看这个,以帮助你使用SVG的

将SVG块的第一行更改为:

<svg version="1.2" baseProfile="tiny" x="0px" y="0px" width="40px" height="40px" viewBox="30 47 85 70" data-toggle="tooltip" title="" data-original-title="Projects">

你犯了以下错误:

  • 与其他SVG相比,你的高度和宽度设置不正确(你定义的高度:60px &您已定义的宽度70px)
  • 你的viewBox属性设置不正确,所以元素没有正确对齐