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

Question

我在Photoshop CC中创建了一个徽标。导出为＆gt; SVG。添加到我的项目中。它的引用很好，因为我可以从Chrome开发工具中的html路径进入并查看SVG。但该图标拒绝显示在网页上。我甚至尝试将svg导入Inkscape并以不同的svg格式重新导出它以查看是否存在问题。在Chrome开发工具中查看文件显示：

我使用roots和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

触针/丢失

@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 image：是一个base64转换的png。

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

我建议不要使用base64。在svg图像中的图像标签中更是如此。 （这是有争议的，基于意见的）

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