chrome 中的 SVG 透明，适用于其他浏览器

Question

我在 Photoshop CC 中创建了一个徽标。导出为 > SVG。添加到我的项目中。它的引用很好，因为我可以从 Chrome Dev Tools 中的 html 转到路径，并且可以很好地查看 SVG。但该图标拒绝在网页上显示。我什至尝试将 svg 导入 Inkscape 并以不同的 svg 格式重新导出它以查看是否是问题所在。在 Chrome Dev Tools 中查看文件显示：

我正在使用 roots, with lost。

翡翠

header
  .header-position
    h1.logo

    nav.navigation
      ul.links
        li: a(href="#quote") quote
        li: a(href="#projects") projects
        li: a(href="#contact") contact

    a(href="mailto:me@gmail.com").email-link +contact

stylus/lost

@import '_settings'

normalize-css()
base()

body
  padding: 0px
  background: #999

section
  lost-utility: clearfix;
  /*lost-utility: edit;*/
/*
div
  lost-column: 1/3;

*/
position-fixed(top bottom left)
  position fixed
  top top
  bottom bottom
  left left

.wrap
  display: flex
  min-height: 100vh

  @media (max-width: 775px)
    display: block

  header
    width: 135 px
    background: white
    padding: 30px 0


    .header-position
      position-fixed 0 0 0
      width: 135px
      display: flex
      flex-direction: column
      justify-content: space-between

  .navigation
    ul
      list-style: none
      margin: 20px 0
      padding: 0 20px 0 0
      text-align: right

      li
        margin-bottom: 10px

        &:last-child
          margin-bottom: 0

  .logo
    background-image: url(../img/CombinationMarkBottomText.svg)
    background-repeat: no-repeat
    background-position: center
    background-size: contain
    /*background-color: pink*/
    height: 200px
    max-width: 135px

  .email-link
    padding-right: 20px
    text-align: right

  .mobile-nav-toggle
    width 50px
    height 2px
    background #333

@media (max-width: 775px)
  .wrap header
    width: auto
    padding 20px

    .header-position
      width auto
      position: relative
      top auto
      bottom auto
      left auto
      flex-direction row
      align-items center

    .navigation,
    .email-link
      display none
    .logo
      height 20px

编辑

这是 svg 的代码。

http://pastebin.com/UkGzVYp8

Answer 1

你的svg图片：是base64转换的png。

您可以在此处的 <image> 标签属性中看到它：xlink:href="data:img/png;base64,iVB[...]

我根本不推荐使用 base64。在 svg 图像内的图像标签中更是如此。（这是有争议的和基于意见的）

我建议使用 Inkscape 将 png 图像转换为 svg。在编辑器中有一个用于转换的内置函数。在处理 svg 图像时，它也是免费且方便的工具。

chrome 中的 SVG 透明，适用于其他浏览器

SVG transparent in chrome, works in other browsers

svg

google-chrome

postcss

翡翠

stylus/lost

编辑