调试！ SVG 徽标和工具提示错误答案

【问题标题】：Debugging! SVG logo & tooltip bug调试！ SVG 徽标和工具提示错误
【发布时间】：2015-10-15 22:15:44
【问题描述】：

我在编辑 SVG 并将其嵌入网页方面非常陌生。我的客户是一名平面设计师，因此他为他的网站创建了一个 svg 徽标，并希望我将其嵌入到他的导航栏中。

我也在使用 Bootstrap，作为开发的一部分，我正在使用引导工具提示。但是，一旦我嵌入 svg 并通过视图框编辑坐标，我的工具提示之一就遇到了问题。

工具提示似乎与这个特定的徽标有问题。其余的都还好，但由于某种原因，我不知道如何解决这个问题。

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

有问题的标志是导航栏上的第二个标志，您也可以通过网络检查器查看我的代码。

感谢任何帮助/建议！

提前致谢:)

更新：

抱歉给您带来任何不便。 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>

【问题讨论】：

标签： javascript css twitter-bootstrap svg tooltip

【解决方案1】：

我建议你有一个read over this 和一个look at this 来帮助你处理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中没有title属性，title是子元素。
@RobertLongson 我只是在处理给定的内容。访问该网站并将其替换为他们的作品。
是的，但您的回答应该建议最佳实践，不是吗？
@RobertLongson 是的 - 尽管这个社区中的所有人似乎都在互相批评。我的座右铭是“如果它有效并且它是安全的。离开它”。无论如何，你为什么不留下你的答案？
它在功能上不会比你的答案好很多，就实际解决 OPs 问题而言，这绝对没问题。