我试图在图片标记中显示base64编码的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+">
我的图片标签尺寸固定且很小(150 * 150),因为我的svg尺寸可能会有所不同(目前为1366 * 768)。
在所有其他浏览器中,svg图像缩放为图像标签尺寸。
在IE图像中本身没有显示出来。
如果我增加图片标签尺寸,则显示1000 * 1000。
我应该做些什么来在IE中像其他bowsers一样显示图像?
答案 0 :(得分:3)
您应该将viewBox="0 0 [width] [height]"
添加到<svg />
根元素以使其缩放。
这是你viewBox="0 0 1366 768"
的小提琴:
https://jsfiddle.net/xdcqagL4/1/
顺便说一下,您还可以查看preserveAspectRatio
属性,该属性允许您控制图像的缩放方式。
这里有一篇关于SVG坐标系的精彩文章:https://sarasoueidan.com/blog/svg-coordinate-systems/