Q&A
###前提・実現したいこと
CreateJSで外部からデータを取得してBitmapに変換して表示したいです。
###発生している問題・エラーメッセージ
chromeで確認していたのですが、firefoxやedgeで見ると何も表示されませんでした。
簡単にしたものをのせます(ソースを↓みたいに単純にしても表示されませんでした・・・)
エラーのログは何もありませんでした。
###該当のソースコード
html
1 2 <canvas id="canvas"></canvas> 3 <script src="jquery-2.2.3.min.js"></script> 4 <script src="easeljs-0.8.2.min.js"></script> 5 <script> 6 window.onload = function() { 7 var bg = { 8 Canvas: {}, 9 Stage: {}, 10 draw: { 11 init: function() { 12 bg.Canvas = document.getElementById('canvas'); 13 bg.Canvas.width = $(window).width() *2; 14 bg.Canvas.height = $(window).height()*2; 15 bg.Canvas.style.width = $(window).width() + 'px'; 16 bg.Canvas.style.height = $(window).height() + 'px'; 17 bg.Stage = new createjs.Stage(bg.Canvas); 18 bg.draw.convert(); 19 }, 20 convert: function() { 21 var bit_data = new createjs.Bitmap('http://localhost/svg/ityo.svg'); 22 bit_data.image.onload = function() { 23 bit_data.scaleX = 2; 24 bit_data.scaleY = 2; 25 bit_data.width = 150; 26 bit_data.height = 150; 27 bg.Stage.addChild(bit_data); 28 bg.Stage.update(); 29 } 30 } 31 } 32 } 33 bg.draw.init(); 34 } 35 </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>
基本的なことなのですが、つまづいてしまいました。
ご教授お願いします。
回答2件
0
ベストアンサー
他の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/03 17:56
総合スコア2604
0
一部のブラウザではsvg要素の幅や高さを指定しないと要素のサイズが得られず描画されない場合があります。
svgに直接width=""などを指定するか、
もしCSSを使っているならCSSファイルに記述して、表示するサイズを設定してみてください。
投稿2016/08/04 02:52
総合スコア1298
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/08/04 08:09