Javascript Base 64 SVG图像在IE中不可缩放

我试图在图像标记中显示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

---

我应该做什么才能像在其他Bowser中一样在IE中显示图像？

您应该将

viewBox=“0 0[width][height]”

添加到

根元素中以使其缩放

这是您的小提琴

viewBox=“0 0 1366 768”

：

顺便说一句，您还可以查看允许您控制图像缩放方式的属性

---

这里有一篇关于SVG坐标系的精彩文章：

如果希望图像缩放，请为SVG根元素提供有效的viewBox属性。这意味着您需要对其进行解码、编辑和重新编码。谢谢：）它解决了这个问题。因此，您实际上可以通过简单的URL编码对svg进行编码来节省空间，通常这会导致更短的字符串和更少的数据（输出类似于：

data:image/svg+xml；charset=utf8，%3Csvg version='1.1'xmlns='1。）http://www.w3.org/2000/svg“width='113.6px'height='218.8px'viewBox='57.7 27.5 113.6 218.8'%3E%3path fill='%23fff'd='M131.4'/%3E%3C/svg%3E

-我知道它与svg无关，但对于svg，您不需要使用base64编码，使它们更轻r、 感谢您的建议：）我正在表中保存编码的值，看起来base64编码的值比url编码的值占用更少的空间。