2

Photoshop CC でロゴを作成しました。エクスポート > SVG。私のプロジェクトに追加されました。Chrome Dev Tools の html からパスに移動し、SVG が正常に表示されるので、正常に参照されています。しかし、アイコンは Web ページに表示されません。svg を Inkscape にインポートし、別の svg 形式で再エクスポートして、それが問題かどうかを確認することさえ試みました。Chrome Dev Tools でファイルを表示すると、次のようになります。

透過 SVG

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

4

1 に答える 1

4

svg image: は base64 に変換された png です。

<image>次のタグ属性で確認できます。xlink:href="data:img/png;base64,iVB[...]

base64 の使用はお勧めしません。svg 画像内の画像タグではなおさらです。（これは議論の余地があり、意見に基づいています）

Inkscape を使用して png 画像を svg に変換することをお勧めします。エディタ内で変換するためのビルドイン機能があります。また、svg 画像を操作するときに便利な無料ツールです。

于 2015-11-06T12:37:43.290 に答える