ベース64 IEでスケーリングされていないSVGイメージ

イメージタグにbase64でエンコードされたSVGイメージを表示しようとしています。ベース64 IEでスケーリングされていないSVGイメージ

<img width="150" height="150" class="thumbnail-image" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTM2NiIgaGVpZ2h0PSI3NjgiIGNsYXNzPSJvdmVybGF5IG1haW4tdHJlZS1zdmctYm94IiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIiBpZD0ic3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9InN2Z0dyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2ODMsMjg0KSI+PHBhdGggY2xhc3M9Imxpbmsgc2luZ2xlUGFyZW50IGlwLWFuaW1hdGlvbiIgc3Ryb2tlLXdpZHRoPSIxLjVweCIgc3Ryb2tlPSIjMDNBOUY0IiBmaWxsPSJub25lIiBkPSJNLTI2LDRDLTE0Nyw0IC0xNDcsMjAgLTI2OCwyMCIgbWFya2VyLXN0YXJ0PSJ1cmwoI2Fycm93aGVhZFJhZGlhbFN0YXJ0LXJvb3QtZW0tc2VydmVyLTEpIiBtYXJrZXItZW5kPSJ1cmwoI2Fycm93aGVhZFJhZGlhbEVuZC1yb290LWVtLXNlcnZlci0xKSIgdGFyZ2V0aWQ9InNlcnZlci0xIiBzb3VyY2VpZD0icm9vdC1lbSIgc3R5bGU9InN0cm9rZS1kYXNoYXJyYXk6IDQ7IGFuaW1hdGlvbi1kaXJlY3Rpb246IHJldmVyc2U7Ii8+PHBhdGggY2xhc3M9Imxpbmsgc2luZ2xlUGFyZW50IGlwLWFuaW1hdGlvbiIgc3Ryb2tlLXdpZHRoPSIxLjVweCIgc3Ryb2tlPSIjMDNBOUY0IiBmaWxsPSJub25lIiBkPSJNLTI2OCwyMEMtMTQ3LDIwIC0xNDcsMTk2IC0yNS45OTk5OTk5OTk5OTk5OSwxOTYiIG1hcmtlci1zdGFydD0idXJsKCNhcnJvd2hlYWRSYWRpYWxTdGFydC1zZXJ2ZXItMS1jbGllbnQtMTI2KSIgbWFya2VyLWVuZD0idXJsKCNhcnJvd2hlYWRSYWRpYWxFbmQtc2VydmVyLTEtY2xpZW50LTEyNikiIHRhcmdldGlkPSJjbGllbnQtMTI2IiBzb3VyY2VpZD0ic2VydmVyLTEiIHN0eWxlPSJzdHJva2UtZGFzaGFycmF5OiA0OyIvPjxnIGNsYXNzPSJub2RlIG5vZGUtZWxlbWVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKXJvdGF0ZSg5MCkiIGNvb3JkPSIxODA6MCIgbmFtZT0iRWNvc3lzdGVtIE1hbmFnZXIiIGlkPSJub2RlLXJvb3QtZW0iPjx0ZXh0IHg9IjM2IiB5PSIzNiIgZHk9Ii4zNWVtIiBjbGFzcz0ibm9kZVRleHQiIGNpaWQ9InJvb3QtZW0iIHRleHQtYW5jaG9yPSJlbmQiIHRpdGxlPSJFY29zeXN0ZW0gTWFuYWdlciIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSIgZmlsbD0iIzJkNjA4MyIgc3R5bGU9ImZvbnQtc2l6ZTogMTBweDsgZmlsbC1vcGFjaXR5OiAxOyI+RWNvc3lzdGVtIE1hbmFnZXI8L3RleHQ+PGNpcmNsZSByPSIyNiIgY2lpZD0icm9vdC1lbSIgZmlsbD0iI0IzRDRGQyIgc3Ryb2tlLXdpZHRoPSI1IiBjbGFzcz0ibm9kZS1jaXJjbGUiIHN0cm9rZT0iIzAzQTlGNCIvPjxpbWFnZSB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeGxpbms6aHJlZj0iaW1hZ2VzL2VtLWljb24ucG5nIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBjaWlkPSJyb290LWVtIiB0cmFuc2Zvcm09InJvdGF0ZSgxODApIiBjbGFzcz0iYmx1ZXByaW50LWljbyIgeD0iLTEwcHgiIHk9Ii0xMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4Ii8+PC9nPjxnIGNsYXNzPSJub2RlIG5vZGUtZWxlbWVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI5NCwxNikiIGNvb3JkPSItMjk0OjE2IiBpcGFkZHJlc3M9IjEyNy4wLjAuMSIgbmFtZT0iMTI3LjAuMC4xIiBpZD0ibm9kZS1zZXJ2ZXItMSI+PHRleHQgeD0iMjAiIHk9IjI2IiBkeT0iLjM1ZW0iIGNsYXNzPSJub2RlVGV4dCIgY2lpZD0ic2VydmVyLTEiIHRleHQtYW5jaG9yPSJlbmQiIHRpdGxlPSIxMjcuMC4wLjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIiBmaWxsPSIjMmQ2MDgzIiBzdHlsZT0iZm9udC1zaXplOiAxMHB4OyBmaWxsLW9wYWNpdHk6IDE7Ij4xMjcuMC4wLjE8L3RleHQ+PGNpcmNsZSByPSIyMCIgY2lpZD0ic2VydmVyLTEiIGZpbGw9IiNCM0Q0RkMiIHN0cm9rZS13aWR0aD0iMS41IiBjbGFzcz0ibm9kZS1jaXJjbGUiIHN0cm9rZT0iIzAzQTlGNCIvPjxpbWFnZSB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeGxpbms6aHJlZj0iaW1hZ2VzL3NlcnZlci1pY29uLnBuZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgY2lpZD0ic2VydmVyLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIiBjbGFzcz0iYmx1ZXByaW50LWljbyIgeD0iLTEwcHgiIHk9Ii0xMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4Ii8+PC9nPjxnIGNsYXNzPSJub2RlIG5vZGUtZWxlbWVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4xNzU2NjA5MjcxODE0NTllLTE0LDE5Milyb3RhdGUoOTApIiBjb29yZD0iMTgwOjE5MiIgaXBhZGRyZXNzPSIxOTIuMTY4LjQ4LjMwIiBuYW1lPSJhbmphbmEiIGlkPSJub2RlLWNsaWVudC0xMjYiPjx0ZXh0IHg9Ii0xNCIgeT0iMjYiIGR5PSIuMzVlbSIgY2xhc3M9Im5vZGVUZXh0IiBjaWlkPSJjbGllbnQtMTI2IiB0ZXh0LWFuY2hvcj0ic3RhcnQiIHRpdGxlPSJhbmphbmEiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiIGZpbGw9IiMyZDYwODMiIHN0eWxlPSJmb250LXNpemU6IDEwcHg7IGZpbGwtb3BhY2l0eTogMTsiPmFuamFuYTwvdGV4dD48Y2lyY2xlIHI9IjIwIiBjaWlkPSJjbGllbnQtMTI2IiBmaWxsPSIjQjNENEZDIiBzdHJva2Utd2lkdGg9IjEuNSIgY2xhc3M9Im5vZGUtY2lyY2xlIiBzdHJva2U9IiMwM0E5RjQiLz48aW1hZ2UgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhsaW5rOmhyZWY9ImltYWdlcy9hZ2VudC1pY29uLnBuZyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgY2lpZD0iY2xpZW50LTEyNiIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSIgY2xhc3M9ImJsdWVwcmludC1pY28iIHg9Ii0xMHB4IiB5PSItMTBweCIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIvPjwvZz48L2c+PGRlZnM+PG1hcmtlciBpZD0iYXJyb3doZWFkUmFkaWFsRW5kLXJvb3QtZW0tc2VydmVyLTEiIHZpZXdCb3g9IjAgLTUgMTAgMTAiIHJlZlg9IjAiIHJlZlk9IjAiIG1hcmtlcldpZHRoPSI2IiBtYXJrZXJIZWlnaHQ9IjYiIG9yaWVudD0iYXV0byIgZmlsbD0iIzAzQTlGNCI+PHBhdGggZD0iTTAsLTVMMTAsMEwwLDUiLz48L21hcmtlcj48bWFya2VyIGlkPSJhcnJvd2hlYWRSYWRpYWxFbmQtc2VydmVyLTEtY2xpZW50LTEyNiIgdmlld0JveD0iMCAtNSAxMCAxMCIgcmVmWD0iMCIgcmVmWT0iMCIgbWFya2VyV2lkdGg9IjYiIG1hcmtlckhlaWdodD0iNiIgb3JpZW50PSJhdXRvIiBmaWxsPSIjMDNBOUY0Ij48cGF0aCBkPSJNMCwtNUwxMCwwTDAsNSIvPjwvbWFya2VyPjwvZGVmcz48ZGVmcz48bWFya2VyIGlkPSJhcnJvd2hlYWRSYWRpYWxTdGFydC1yb290LWVtLXNlcnZlci0xIiB2aWV3Qm94PSIwIC01IDEwIDEwIiByZWZYPSIwIiByZWZZPSIwIiBtYXJrZXJXaWR0aD0iNiIgbWFya2VySGVpZ2h0PSI2IiBvcmllbnQ9ImF1dG8iIGZpbGw9IiMwM0E5RjQiPjxwYXRoIGQ9Ik0wLDBMMTAsLTVMMTAsNVoiLz48L21hcmtlcj48bWFya2VyIGlkPSJhcnJvd2hlYWRSYWRpYWxTdGFydC1zZXJ2ZXItMS1jbGllbnQtMTI2IiB2aWV3Qm94PSIwIC01IDEwIDEwIiByZWZYPSIwIiByZWZZPSIwIiBtYXJrZXJXaWR0aD0iNiIgbWFya2VySGVpZ2h0PSI2IiBvcmllbnQ9ImF1dG8iIGZpbGw9IiMwM0E5RjQiPjxwYXRoIGQ9Ik0wLDBMMTAsLTVMMTAsNVoiLz48L21hcmtlcj48L2RlZnM+PC9zdmc+">

jsFiddle Link

マイ画像タグのサイズは固定され、私のSVGのサイズを変えることができるように（* 150 150）が小さい（現在は1366 * 768）。

他のすべてのブラウザでは、svgイメージはイメージタグのサイズに合わせてスケーリングされます。

IEイメージ自体には表示されません。

イメージタグのサイズを1000 * 1000と大きくすると表示されます。

他のブーザーのようにIEで画像を表示するにはどうすればよいですか？

出典

2016-06-23 Jerry

：

はここでSVGに大きな書き込みアップ座標系です。つまり、デコードして編集し、再エンコードする必要があります。 –

ありがとう:)それは問題を解決しました – Jerry

また、単純にURLエンコーディングでsvgをエンコードすることで実際にスペースを節約することができます。通常は短い文字列と少ないデータになります（出力は 'data：image/svg + xml ; charset = utf8、％3Csvg version = '1.1' xmlns = 'http：//www.w3.org/2000/svg' width = '113.6px' height = '218.8px' viewBox = '57 .7 27.5 113.6 218.8 '％ 3E％3Cpath fill = '％23fff' d = 'M131.4' /％3E％3C/svg％3E' - 無関係ですが、SVGではbase64エンコーディングを使用する必要がなくなり、より軽量になります。 – somethinghere

には、viewBox="0 0 [width] [height]"を追加して、縮尺を変更する必要があります。ここで

はviewBox="0 0 1366 768"であなたのフィドルです： https://jsfiddle.net/xdcqagL4/1/

ところであなたはまた、あなたがイメージがスケーリングされる方法を制御できますpreserveAspectRatio属性に見ることができます。あなたはSVGのルート要素に有効なビューボックスの属性を与えるスケール画像をしたい場合はhttps://sarasoueidan.com/blog/svg-coordinate-systems/

出典

2016-06-23 09:39:03 pawel

ありがとうございました:)それは問題を解決しました – Jerry

ベース64 IEでスケーリングされていないSVGイメージ

答えて

関連する問題