HTML中嵌入SVG图片的N种方式
发表评论
最近用到了个SVG图片,里面还是带
但是通过
W.T.F查了半天MDN,也没有什么收获。最后在StackOverflow上找到了一个解决方案:即使用
只显示了图片左上角那部分有木有!这张图片是按2倍图做的,应该要缩小一半,...阅读全文
<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中后却变成了这样:
<embed>
标签。修改成<embed src="./test.svg" style="display:block;width:330px;height:240px" />
后却显示成了: