SVG 其它SVG内容

🌙
手机阅读
本文目录结构

SVG 实例


除了图形化原件,如矩形和圆形之外,SVG还提供了一些元素用来在图片中嵌入别的类型的内容。

嵌入光栅图像

很像在HTML中的img元素,SVG有一个image元素,用于同样的目的。你可以利用它嵌入任意光栅(以及矢量)图像。它的规格要求应用至少支持PNG、JPG和SVG格式文件。

嵌入的图像变成一个普通的SVG元素。这意味着,你可以在其内容上用剪切、遮罩、滤镜、旋转以及其它SVG工具:

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200">
  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
</svg>

嵌入任意XML

因为SVG是一个XML应用,所以你总是可以在SVG文档的任何位置嵌入任意XML。但是你没有必要定义周围的SVG需要怎样反作用于这个内容。实际上,在一个遵从的浏览者中,根本没有反作用的方法,数据将简单被忽略。因此特地在SVG中添加了<foreignObject> 元素。

它的唯一的目的是作为其它标记的容器和SVG样式属性的载体(更突出的width和height用来定义该对象占用的空间。)。

foreignObject元素是一个好办法,用来在SVG中嵌入XHTML。如果你有更长的文本,该HTML布局比SVG text元素更适合。另一个经常被引用的用例是用MathML写的方程式。对于SVG的科学应用,它是连接两个世界的一个很好的办法。

注意:请记住,foreignObject元素的内容是能被浏览器加工的。一个独立的SVG浏览器不太可能呈现HTML或MathML。

因为foreignObject是一个SVG元素,所以你可以像用图像那样,使用任何SVG的精华,它将被应用到它的内容。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>