Question

我在svg中制作了一个徽标并在我的网站上实现了它。它适用于所有浏览器，除了safari

注意 - 你冥想使用safari重新创建我的问题。在任何其他浏览器中查看小提琴就像它的假设一样。

这是我的导航栏html

  <div class="navsection">
    <div class="w-nav navbar" data-collapse="medium" data-animation="default" data-duration="400" data-contain="1">
      <div class="w-container">
        <a class="w-nav-brand" href="#">
          <img class="logo" src="https://dl.dropboxusercontent.com/u/66131799/JA_logo_2014_svg.svg"  width="100">
        </a>
        <nav class="w-nav-menu mobilenavmenu" role="navigation"><a class="w-nav-link navlinks" href="#work">work</a><a class="w-nav-link navlinks" href="#contact">contact</a>
        </nav>
        <div class="w-nav-button">
          <div class="w-icon-nav-menu hamburger"></div>
        </div>
      </div>
    </div>
  </div>

是什么导致这种情况发生？

Answer 1

您可以开始使用

    preserveAspectRatio="xMinYMin meet" in your svg header

但是如果没有小提琴上的svg，我就无法验证这一点

你的css

    img {
         display: block;
         position: absolute;
         width: 100%;
         top: 0;
         left: 0;
        }
    .w-nav-brand {
         display: inline-block;
         position: relative;
         width: 50%;
         padding-bottom: 60%;
        }

60％需要根据尺寸和宽度进行调整。

我已经使用了this guide，效果很好，但对象标签比img更多。尝试减少小提琴中包含的css数量，你会得到更多的兴趣！

Safari在SVG徽标的顶部和底部提供填充

1 个答案: