1、image的路径的演示:
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" height="130" width="500" style="fill: #333333"/>
<image x="20" y="20" width="150" height="46"
xlink:href="./picture.jpg" />
<line x1="25" y1="80" x2="350" y2="80"
style="stroke: #ffffff; stroke-width: 3;"/>
<text x="180" y="110" style="fill:#fff;">革命尚未成功,努力仍将继续!</text>
</svg>
</body>
</html>
运行结果为:
HTML文件的位置为:
2、单纯图片的显示:
<!DOCTYPE html>
<html>
<body>
<svg width="1000 height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0,0,500,500">
<image xlink:href="./picture.jpg" height="500px" width="500px">
</svg>
</body>
</html>