Javascript 调试!SVG标志&;工具提示错误

Javascript 调试!SVG标志&;工具提示错误,javascript,css,twitter-bootstrap,svg,tooltip,Javascript,Css,Twitter Bootstrap,Svg,Tooltip,我对编辑SVG并将其嵌入到网页中是相当陌生的。我的客户是一名平面设计师,所以他为他的网站创建了一个svg徽标,并希望我将其嵌入到他的导航栏中 我也使用引导,作为开发的一部分,我使用引导工具提示。然而,当我嵌入svg并通过viewbox编辑坐标后,我的一个工具提示遇到了问题 工具提示似乎有这个特殊的标志。其余的都没问题,但由于某种原因,我不知道如何解决这个问题 我今天上传了这个网站以供测试,你可以在 有问题的徽标是导航栏上的第二个徽标,您也可以通过web inspector查看我的代码 感谢您的帮

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

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

工具提示似乎有这个特殊的标志。其余的都没问题,但由于某种原因,我不知道如何解决这个问题

我今天上传了这个网站以供测试,你可以在

有问题的徽标是导航栏上的第二个徽标,您也可以通过web inspector查看我的代码

感谢您的帮助/推荐

提前感谢:)

更新:

很抱歉给您带来不便。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属性设置不正确,因此元素没有正确对齐

    您不需要version或baseProfile,0是x,y的默认值,SVG中没有标题属性,标题是子元素。@RobertLongson我只是在处理给定的内容。进入网站,用他们的it作品替换它。是的,但你的答案应该是最佳实践,不是吗?@RobertLongson是的-尽管这个社区的每个人似乎都在互相批评。我的座右铭是“如果它有效并且安全,就离开它”。不管怎样,你为什么不留下你的答案呢?从功能上来说,它不会比你的答案好得多,而你的答案在实际解决老年退休金问题方面是绝对好的。