您的位置:首页 > Web前端 > HTML

HTML中嵌入SVG图片的N种方式

2018-03-17 00:22 204 查看
最近用到了个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">
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: