HTML概念: SVG 捕捉缩放

前端之家收集整理的这篇文章主要介绍了HTML概念: SVG 捕捉缩放前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

g元素用于将SVG图形进行分组。一旦被分组所有的图形都可以像一个图形一样进行变形。相对于svg元素没有办法将自己作为变形元素来说是一个优势。

直接嵌入

下面的例子是把SVG代码直接嵌入到HTML代码中。
谷歌Chrome,火狐,Internet Explorer9,和Safari都支持

注意:下面的例子将不会在Opera运行,即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。

文件嵌入

web上的svg文件可以直接在浏览器上展示,或者通过以下几种方法嵌入到HTML文件中:

  • 如果HTML是XHTML并且声明类型为application/xhtml+xml,可以直接把SVG嵌入到XML源码中。

  • 如果HTML是HTML5并且浏览器支持HTML5,同样可以直接嵌入SVG。然而为了符合HTML5标准,可能需要做一些语法调整。
    可以通过 object 元素引用SVG文件


类似的也可以使用 iframe 元素引用SVG文件