×

SVG基础 | SVG image 元素

作者:Terry2016.09.10来源:Web前端之家浏览:18536评论:0
关键词:html5SVG

SVG <image>元素用于在SVG图像中嵌入位图。通过使用<image>元素你可以将一张位图绘制在SVG图像上面。

600.png

下面是一个简单的例子:

<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教程目录

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1473436800598.html

网友评论文明上网理性发言 已有0人参与

发表评论: