2018-11-15

svg


SVG 在 HTML 页面中怎样使用?


(1)使用 <embed> 标签

<embed>:

优势:所有主要浏览器都支持,并允许使用脚本

缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)

语法:

<embed src="circle1.svg" type="image/svg+xml" />

结果:

(2)使用 <object> 标签

<object>:

优势:所有主要浏览器都支持,并支持HTML4,XHTML和HTML5标准

缺点:不允许使用脚本。

语法:

<object data="circle1.svg" type="image/svg+xml"></object>

结果:

(3)使用 <iframe> 标签

<iframe>:

优势:所有主要浏览器都支持,并允许使用脚本

缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)

语法:

<iframe src="circle1.svg"></iframe>

结果:

直接在HTML嵌入SVG代码

在Firefox、Internet Explorer9、谷歌Chrome和Safari中,你可以直接在HTML嵌入SVG代码。

(4)直接在HTML嵌入SVG代码

在Firefox、Internet Explorer9、谷歌Chrome和Safari中,你可以直接在HTML嵌入SVG代码。

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>

(5)链接到SVG文件

您还可以用<a>标签链接到一个SVG文件:链接到SVG文件

您还可以用<a>标签链接到一个SVG文件:

<a href="circle1.svg">View SVG file</a>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,758评论 1 45
  • 软件分为两种架构c/s和b/s一个网页分为:结构,表现,行为三个部分主要使用工具有:浏览器,编辑器,调试工具,图片...
    清酒金杯空对月阅读 156评论 0 0
  • 软件主要分C/S和B/S两种架构。我们学习的是B/S的软件开发。B/S架构中的B代表browsers(浏览器),S...
    一片落叶就是渺小阅读 257评论 0 0
  • 有一次分手闹得厉害 理由是我觉得他处处管着我 怎知我是一匹从小散养的野马 想要驯服我 比我凶是没用的 只会让我反抗...
    李小花儿_阅读 261评论 0 1
  • 当我毅然决定加速特训营的时候,我家二宝才三个多月,我深知我做个决定需要吃多少苦,同时也明白今天能吃多少苦,明天就可...
    不亦乐乎_521b阅读 166评论 0 0