SVG图片与文字的整合

来源:互联网 发布:adobe muse mac 破解 编辑:程序博客网 时间:2024/06/05 10:33

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>



0 0
原创粉丝点击