最近用到了个SVG图片，里面还是带<image>标签的，想要把它嵌入到HTML中还是有些工作要做的。

经历

最初的图片是这样写的

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"preserveAspectRatio="xMinYMin meet"width="660" height="342"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="660" height="342"/><rect x="2" y="284" width="656" height="58" fill="rgba(0,0,0,0.6)" stroke-width="1" ></rect><text text-anchor="start"font-family="Microsoft Yahei, sans-serif" font-size="28"x="20" y="322" fill="#fff">这是百度</text><text text-anchor="end"font-family="Microsoft Yahei, sans-serif" font-size="28"x="640" y="322" fill="#fff">😄</text></svg>

p.s. 先拿百度的图片来凑个数显示效果应该是：但是通过<img>标签插入到HTML中后却变成了这样：W.T.F查了半天MDN，也没有什么收获。最后在StackOverflow上找到了一个解决方案：即使用<embed>标签。修改成<embed src="./test.svg" style="display:block;width:330px;height:240px" />后却显示成了：只显示了图片左上角那部分有木有！这张图片是按2倍图做的，应该要缩小一半，...阅读全文