質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

chrome以外でBitmap.imageが表示されない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,295
退会済みユーザー

退会済みユーザー

前提・実現したいこと

CreateJSで外部からデータを取得してBitmapに変換して表示したいです。

発生している問題・エラーメッセージ

chromeで確認していたのですが、firefoxやedgeで見ると何も表示されませんでした。
簡単にしたものをのせます(ソースを↓みたいに単純にしても表示されませんでした・・・)

エラーのログは何もありませんでした。

該当のソースコード

<canvas id="canvas"></canvas>
  <script src="jquery-2.2.3.min.js"></script>
  <script src="easeljs-0.8.2.min.js"></script>
  <script>
    window.onload = function() {
      var bg = {
        Canvas: {},
        Stage: {},
        draw: {
          init: function() {
            bg.Canvas = document.getElementById('canvas');
            bg.Canvas.width = $(window).width() *2;
            bg.Canvas.height = $(window).height()*2;
            bg.Canvas.style.width = $(window).width() + 'px';
            bg.Canvas.style.height = $(window).height() + 'px';
            bg.Stage = new createjs.Stage(bg.Canvas);
            bg.draw.convert();
          },
          convert: function() {
            var bit_data = new createjs.Bitmap('http://localhost/svg/ityo.svg');
            bit_data.image.onload = function() {
              bit_data.scaleX = 2;
              bit_data.scaleY = 2;
              bit_data.width = 150;
              bit_data.height = 150;
              bg.Stage.addChild(bit_data);
              bg.Stage.update();
            }
          }
        }
      }
      bg.draw.init();
    }
  </script>

試したこと

consoleにログを出力したのですが(下記のbg.Stageやbit_dataなど)chromeと違いはありませんでした。
svgのデータのみ開きましたがchromeでもfirefoxでも表示されました

補足情報

↓これ(ityo.svg)をブラウザで開いてもchromeとfirefoxとで表示は変わりませんでした

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 400 400">
<g>
    <path d="M11.3,24.8L11.3,24.8c-0.3,0.2-0.6,0.4-0.9,0.7c-0.3,0.3-0.5,0.6-0.7,1l0,0c-0.5,0.9-0.8,1.8-1.2,2.6s-0.7,1.8-1,2.7
        c0,0,0,0,0-0.1c0,0.1,0,0.2-0.1,0.3c0,0,0,0,0-0.1c-0.2,0.4-0.4,1.2-0.5,1.4c0,0.1,0,0.2,0,0.1c0,0.1-0.1,0.2-0.1,0.3
        c0,0,0,0.1-0.1,0.1c0,0,0,0-0.1,0.1l-0.1,0c0,0-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0-0.1,0-0.2
        c0-0.1,0-0.1,0.1-0.1c0,0,0-0.1,0.1-0.1l0.1-0.3c0.1-0.2,0.1-0.4,0.2-0.6c0.3-0.7,0.6-1.5,0.8-2.2c0-0.1,0-0.1,0.1-0.1
        c0.4-1.3,0.9-2.6,1.4-3.8c0-0.1-0.1,0.1,0,0c-0.2,0.4-0.3,0.8-0.4,1.1v-0.1c-0.1,0.3,0,0.1-0.1,0.3c-0.1,0.1,0,0,0,0
        c-0.2,0.6-0.5,1.2-0.6,1.7c-0.1,0.1-0.2,0.6-0.3,0.8c0,0.2-0.1,0.3-0.1,0.4c-0.2,0.5-0.4,1-0.6,1.5c-0.1,0.3-0.2,0.5-0.3,0.8
        c-0.1,0.1-0.1,0.2-0.2,0.4c-0.1,0.1-0.2,0.3-0.1,0.4c0,0,0,0.1,0.1,0.1c0.1,0,0.1,0,0.2,0c0.1,0,0.2-0.1,0.2-0.1
        c0.1,0,0.1-0.1,0.2-0.2C7,33.7,7,33.6,7,33.6c0.1-0.3,0.2-0.5,0.3-0.8c0.2-0.5,0.4-1,0.5-1.6c0.1-0.5,0.3-1,0.6-1.6
        c0.1-0.3,0.2-0.5,0.4-0.8C8.9,28.5,9,28.3,9.1,28l0,0c0.1-0.4,0.4-0.9,0.6-1.3c0,0,0,0,0-0.1c0,0,0-0.1,0.1-0.1
        c0-0.1,0.1-0.2,0.1-0.2C10.3,25.7,10.8,25.1,11.3,24.8c0.2-0.1,0.4-0.2,0.5-0.3c0.2-0.1,0.3-0.2,0.5-0.2c0.2-0.1,0.3-0.1,0.5-0.2
        C13,24,13.2,24,13.4,24c0.7-0.1,1.4-0.2,2.2-0.1c0.7,0,1.5,0.1,2.2,0.1c1.6,0.2,3.2,0.4,4.7,0.6c0.8,0.1,1.5,0.2,2.3,0.3
        c0.4,0,0.8,0.1,1.2,0c0.2-0.1,0.4-0.2,0.5-0.4c0.1-0.2,0.2-0.4,0.2-0.6c0,0,0,0,0,0.1c0-0.2,0-0.5,0-0.7c0-0.1,0-0.2,0-0.3
        c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0.1-0.5,0-0.9-0.3-1.3l0,0c-0.1-0.2-0.2-0.5-0.2-0.8c0-0.3,0-0.5,0.1-0.8
        c0-0.1,0.1-0.3,0.1-0.4s0-0.3-0.1-0.4c-0.1-0.3-0.3-0.5-0.4-0.7c-0.2-0.2-0.2-0.5-0.3-0.8c-0.1-0.3-0.2-0.5-0.3-0.8
        c-0.1-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.1-0.2-0.2-0.3c-0.2-0.2-0.5-0.3-0.6-0.5c0-0.1,0-0.3-0.1-0.5c-0.1-0.2-0.2-0.3-0.3-0.4
        c-0.3-0.2-0.6-0.3-0.9-0.5c-0.2-0.1-0.3-0.1-0.5-0.2c-0.2-0.1-0.3-0.1-0.4-0.2C22,13.4,22,13.4,22,13.3s-0.1-0.2-0.1-0.2
        c-0.1-0.2-0.1-0.3-0.2-0.5c-0.2-0.3-0.5-0.5-0.8-0.7c-0.2-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0-0.5,0.1c-0.3,0.1-0.6,0.4-0.8,0.6
        c-0.2,0.3-0.4,0.5-0.6,0.8v0c-0.3,0.5-0.6,0.9-0.9,1.3c-0.2,0.2-0.3,0.4-0.5,0.6c0,0-0.1,0-0.1,0s-0.1,0-0.1,0
        c-0.1,0-0.1-0.1-0.1-0.1c0-0.1,0.1-0.2,0.1-0.4c0.3-0.5,0.6-0.9,0.9-1.3c0.3-0.4,0.7-0.9,0.9-1.4c0.1-0.3,0.2-0.5,0.2-0.8
        c0-0.3,0-0.6-0.2-0.8s-0.3-0.5-0.6-0.7c-0.1-0.1-0.2-0.2-0.4-0.2c-0.1,0-0.3-0.1-0.4-0.1s-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.2-0.3-0.3
        c-0.1-0.1-0.2-0.2-0.4-0.2S16,8.9,15.8,9C15.5,9,15.3,9,15,9c-0.3,0-0.6-0.1-0.8-0.2c-0.2-0.1-0.3-0.2-0.5-0.3
        c-0.1-0.1-0.3-0.2-0.5-0.3s-0.4,0-0.6,0c-0.2,0.1-0.4,0.2-0.5,0.2c-0.2,0.1-0.4,0.1-0.6,0c-0.2-0.1-0.3-0.2-0.5-0.3
        c-0.2-0.1-0.4-0.1-0.5-0.1c-0.2,0-0.3,0-0.5,0.1C9.8,8.3,9.7,8.4,9.5,8.5C9.4,8.6,9.2,8.6,9.1,8.6c-0.3,0-0.7-0.1-1-0.1
        C7.7,8.6,7.4,8.8,7.2,9C6.9,9.2,6.7,9.5,6.4,9.6c-0.3,0.1-0.6,0.1-1,0.2C5.3,9.8,5.1,9.8,5,9.9c-0.1,0.1-0.3,0.2-0.3,0.4
        c-0.1,0.1-0.1,0.3-0.2,0.5c0,0.2,0,0.3,0.1,0.5c0.1,0.1,0.2,0.3,0.3,0.4L5.2,12c0.8,1,1.5,1.9,2.3,2.9c0.4,0.5,0.7,1,1,1.5
        C8.7,17,9,17.5,9.2,18.1c0.2,0.5,0.3,1.1,0.4,1.7c0.1,0.6,0.2,1.2,0.2,1.9l0,0c0,0.5,0.1,1,0,1.3v0c0,0.2,0.1,0.6,0,0.7l0,0
        c0,0.3,0,0,0,0.3c0,0.1,0,0,0,0.2c0,0-0.1,0.2-0.1,0.4c0,0.2-0.1,0.3-0.1,0.3c0-0.2-0.1,0.2,0-0.1c0,0.1-0.2,0.6-0.1,0.5
        c0,0.1,0,0.2,0.1,0v-0.1C9.7,25,9.7,25,9.7,25c0.1-0.2,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.1-0.3l0,0c0-0.2,0.1-0.5,0.1-0.6l0-0.1
        c0-0.1,0-0.4,0-0.3c0-0.8,0-1.7-0.1-2.6c0-0.1-0.1-0.7-0.1-0.5c0-0.2-0.1-0.9-0.2-1.1c0,0,0,0,0,0.1c-0.1-0.5-0.2-0.5-0.3-1
        c-0.1,0-0.2-0.8-0.4-1c0-0.1,0-0.1,0-0.1c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3l0-0.2c-0.1-0.1-0.1-0.2-0.2-0.3
        c-0.1-0.2-0.2-0.3-0.3-0.5c-0.1-0.2-0.2-0.3-0.3-0.4c-0.4-0.4-0.8-1.1-1.1-1.5c-0.2-0.3-0.6-0.9-1-1.3l0,0
        c-0.2-0.2-0.4-0.5-0.7-0.8c-0.1-0.1-0.2-0.2-0.3-0.4c0,0,0-0.1-0.1-0.1c0,0,0,0,0-0.1c0-0.1,0-0.1,0-0.2c0-0.2,0.1-0.4,0.2-0.6
        C5,10.2,5.2,10,5.5,10c0.3,0,0.7,0,1.1-0.2c0.1,0,0.2-0.1,0.3-0.2C7,9.6,7.1,9.5,7.1,9.5C7.3,9.3,7.4,9.1,7.6,9S8,8.8,8.3,8.8
        c0.2,0,0.5,0,0.7,0c0.1,0,0.3,0,0.4,0c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.1c0.2,0,0.5,0,0.7,0.1
        c0.1,0.1,0.2,0.1,0.3,0.2c0.1,0.1,0.2,0.1,0.4,0.1c0.2,0,0.3,0,0.4-0.1c0.1,0,0.2-0.1,0.3-0.1l0,0c0.2-0.1,0.5-0.2,0.7-0.2
        c0,0,0,0,0,0c0.2,0,0.3,0.1,0.4,0.3c0.1,0.1,0.3,0.2,0.5,0.3c0,0,0,0-0.1,0c0.3,0.1,0.7,0.3,1.1,0.3l0,0c0,0,0.1,0,0.1,0
        c0.1,0,0.1,0,0.1,0c0,0,0,0-0.2,0c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0c0.2,0,0.4-0.1,0.5,0c0.1,0,0.1,0.1,0.2,0.1
        c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0.2,0.2,0.4,0.1,0.6,0.2s0.4,0,0.5,0.1c0.2,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.2,0.3,0.3,0.5
        c0.1,0.2,0.1,0.4,0.1,0.5c0,0.4-0.1,0.7-0.3,1.1c-0.2,0.3-0.4,0.7-0.6,1c-0.2,0.3-0.5,0.6-0.7,1c-0.1,0.2-0.2,0.3-0.3,0.5
        c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2,0,0.3c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1s0,0,0,0.1c0,0,0,0,0,0.1c0,0,0,0,0.1,0.1
        c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.1-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1s0,0,0,0.1c0.3-0.3,0.5-0.6,0.7-1
        c0.2-0.3,0.4-0.7,0.6-1c0,0-0.1,0.1,0,0c0.3-0.5,0.6-0.7,0.7-0.9c0,0,0,0,0,0c0.1-0.1,0.3-0.3,0.4-0.4c0.2-0.1,0.3-0.2,0.5-0.2
        c0.1,0,0.2,0,0.3,0.1c0.1,0,0.2,0.1,0.3,0.1c0.2,0.1,0.3,0.2,0.5,0.3c0.3,0.3,0.5,0.6,0.6,1c0,0.1,0.1,0.2,0.1,0.3
        c0.1,0.1,0.2,0.2,0.3,0.2c0.2,0.1,0.4,0.2,0.6,0.2c0.3,0.1,0.6,0.3,0.9,0.4c0.1,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.1,0.3,0.1,0.5
        c0,0.1,0,0.2,0.1,0.3c0.1,0.1,0.1,0.1,0.2,0.2c0.1,0.1,0.3,0.2,0.4,0.3s0.2,0.3,0.2,0.5c0.1,0.2,0.1,0.3,0.2,0.5h0
        c0.1,0.2,0.2,0.4,0.2,0.6c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.2,0.2,0.4,0.1,0.7c0,0.1-0.1,0.2-0.1,0.3
        c0,0.1-0.1,0.2-0.1,0.3c0,0.2,0,0.5,0,0.7c0,0.1,0,0.2,0.1,0.3c0,0.1,0.1,0.2,0.1,0.3c0.1,0.2,0.2,0.4,0.2,0.6c0,0.2,0,0.4,0,0.5
        c0,0.2,0,0.3,0,0.5c0,0.3,0,0.6-0.1,1l0,0c0,0.2-0.1,0.3-0.2,0.4c0,0-0.1,0.1-0.1,0.1l0,0l-0.1,0l-0.1,0.1c0,0-0.1,0-0.1,0
        c-0.3,0.1-0.7,0-1,0c-0.7-0.1-1.4-0.2-2-0.3H23c-0.2,0-0.8-0.1-0.7-0.1l-0.2-0.1c-0.9-0.1-1.6-0.3-2.8-0.3h0.1
        c-0.3,0-0.6-0.1-0.9-0.1c0,0,0,0,0.1,0c-0.9-0.1-2-0.2-2.9-0.2l0.1,0c-0.5,0-1.3,0-2,0.1l0,0c0,0-0.1,0-0.2,0c-0.1,0-0.2,0-0.2,0
        l0,0c-0.1,0-0.2,0-0.3,0.1c-0.1,0-0.2,0-0.3,0.1c-0.2,0.1-0.4,0.1-0.6,0.2c-0.2,0.1-0.4,0.2-0.5,0.3C11.7,24.6,11.5,24.7,11.3,24.8
        z" fill="rgb(255,255,255)" style="fill:rgb(255,255,255)"/>
</g>
</svg>


基本的なことなのですが、つまづいてしまいました。
ご教授お願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

他のSVGならば表示されますね(Chrome, FireFox, Edge)。

元のSVGもたしかにChromeしか見れませんが、ほとんどが透明でイチョウの葉の白い縁取りがあるだけのようなので(Chromeでも背景に色を付けないとわからなかった)、SVGの方を見直した方がいいのかもしれません。

  • 表示できたSVG
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="129px"
     style="width:114px;height:129px;" version="1.1" viewBox="0 0 114 129" width="114px">
    <defs>
        <filter height="300%" id="fnazzfj" width="300%" x="-1" y="-1">
            <feGaussianBlur result="blurOut" stdDeviation="2.0"/>
            <feColorMatrix in="blurOut" result="blurOut2" type="matrix"
                           values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
            <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
            <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
        </filter>
    </defs>
    <g>
        <line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="29" x2="29" y1="39.6094"
              y2="89.9609"/>
        <line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="85" x2="85" y1="39.6094"
              y2="89.9609"/>
        <rect fill="#FEFECE" filter="url(#fnazzfj)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;"
              width="39" x="8" y="3"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="25"
              x="15" y="24.5332">Bob
        </text>
        <rect fill="#FEFECE" filter="url(#fnazzfj)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;"
              width="39" x="8" y="88.9609"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="25"
              x="15" y="110.4941">Bob
        </text>
        <rect fill="#FEFECE" filter="url(#fnazzfj)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;"
              width="44" x="61" y="3"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="30"
              x="68" y="24.5332">Alice
        </text>
        <rect fill="#FEFECE" filter="url(#fnazzfj)" height="31.6094" style="stroke: #A80036; stroke-width: 1.5;"
              width="44" x="61" y="88.9609"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="30"
              x="68" y="110.4941">Alice
        </text>
        <polygon fill="#A80036" points="73,67.6094,83,71.6094,73,75.6094,77,71.6094"
                 style="stroke: #A80036; stroke-width: 1.0;"/>
        <line style="stroke: #A80036; stroke-width: 1.0;" x1="29.5" x2="79" y1="71.6094" y2="71.6094"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="27"
              x="36.5" y="67.1045">hello
        </text>
    </g>
</svg>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/04 17:09

    svg→pngに変換したら表示されました!
    ありがとうございました。

    キャンセル

0

一部のブラウザではsvg要素の幅や高さを指定しないと要素のサイズが得られず描画されない場合があります。

svgに直接width=""などを指定するか、
もしCSSを使っているならCSSファイルに記述して、表示するサイズを設定してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る