我在编辑 SVG 并将其嵌入网页方面还很陌生。我的客户是一名平面设计师,因此他为他的网站创建了一个 svg Logo ,并希望我将其嵌入到他的导航栏中。
我也在使用 Bootstrap,作为开发的一部分,我正在使用 Bootstrap 工具提示。但是,一旦我嵌入 svg 并通过 View 框编辑坐标,我的其中一个工具提示就遇到了问题。
工具提示似乎有这个特定 Logo 的错误。其余的都没问题,但出于某种原因,我不知道如何解决这个问题。
出于测试目的,我今天已经上传了该网站,您可以在 http://edizorac.com/ 上看到该问题。
有问题的标志是导航栏上的第二个,你也可以通过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>
最佳答案
May I suggest you have a read over this and also have a look at this to help you with SVG's
将 SVG block 的第一行更改为:
<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 属性设置不正确,因此元素未正确对齐
关于javascript - 调试! SVG Logo 和工具提示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33150390/