网站地图    收藏   

主页 > 专题教程 > svg >

SVG基础 | SVG image 元素

来源:自学PHP网    时间:2018-02-07 18:24 作者: 阅读:

[导读] SVG image元素用于在SVG图像中嵌入位图。通过使用image元素你可以将一张位图绘制在SVG图像上面。...

SVG <image>元素用于在SVG图像中嵌入位图。通过使用<image>元素你可以将一张位图绘制在SVG图像上面。下面是一个简单的例子:

<svg 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="http://img.htmleaf.com/1506/logo.png" />

  <line x1="25" y1="80" x2="350" y2="80"
          style="stroke: #ffffff; stroke-width: 3;"/> 
  <text x="180" y="110" style="fill:#fff;">jQuery之家欢迎您!</text>
</svg>

上面的代码的返回结果是:

jQuery之家欢迎您!

在上面的代码中,深灰色的矩形先被绘制出来,然后是jQuery之家的logo被绘制在深灰色的矩形之上,接着是一条白色的直线被绘制在logo的下方,最后是一串SVG文字

SVG文件中的各个元素的排列顺序就是它们被绘制的顺序,最后绘制的元素被放置在SVG图像的最上方。

除了位图之外,你也可以使用<image>元素来嵌入其他的SVG元素。

<image>元素的浏览器兼容性如下:

  • Chrome 1.0+

  • Firefox (Gecko) 1.8+

  • Internet Explorer 9.0+

  • Opera 8.0+

  • Safari 3.0.4+

  • Android 3.0+

  • Firefox Mobile (Gecko) 1.8+

  • Safari Mobile 3.0.4+

  • IE Mobile 不支持

返回SVG教程目录


    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论