<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>SVG</title>

 </head>

 <body>

     <!-- 内部直接写 -->

     <!-- SVG属性参考 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute -->

     <!-- SVG元素参考 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element -->

     <!-- <svg viewbox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">

         <circle cx="60" cy="60" r="50"></circle>

     </svg> -->

     <!-- <svg width="120" height="120"

          viewPort="0 0 120 120" version="1.1"

          xmlns="http://www.w3.org/2000/svg">

         <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>

     </svg> -->

     <!-- 外部引入 -->

     <iframe src="svg.svg" width="1000" height="500" frameborder="no"></iframe>

 </body>

 </html>

svg.svg

 <svg width="100%" height="100%" viewBox="0 0 400 400"

      xmlns="http://www.w3.org/2000/svg">

   <path d="M 100 100 L 300 100 L 200 300 z"

         fill="orange" stroke="black" stroke-width="3" />

 </svg>

HTML5——5 HTML5 SVG的更多相关文章

  1. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  2. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  3. html5 Canvas和SVG的区别是什么（总结）

    html5 Canvas和SVG的区别是什么(总结) 一.总结 一句话总结:都是2D做图,svg是矢量图,canvas是位图.Canvas 是逐像素进行渲染的,适合游戏. 1.svg的全称是什么? S ...

  4. HTML5: HTML5 内联 SVG

    ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...

  5. html5，html5教程

    html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...

  6. HTML5之一HTML5简介

    1.什么是HTML5? HTML5是HTML的新一代标准.以前版本的HTML标准4.01发布于1999. 自1999年以后,web已经有了翻天覆地的变化. 实际上HTML5仍旧是开发中的一个标准.但是 ...

  7. HTML5中使用SVG

    SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签.你只需定义好XML属性,就能获得一致的图像元素. 使用SVG之前先将标签加入到HTML body ...

  8. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  9. HTML5的 2D SVG和SVG DOM的学习笔记（1）

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  10. HTML5学习(六)---------SVG 与Canvas

    参考教程:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不 ...

随机推荐

  1. ES 数据类型

    官网数据类型网址 有价值的参考博客 本文 Elasticsearch 版本为 7.2 1. 核心数据类型 (1)字符串类型: text, keyword (2)数字类型:long, integer, ...

  2. TensorFlow.训练_资料（有视频）

    ZC:自己训练 的文章 貌似 能度娘出来很多,得 自己弄过才知道哪些个是坑 哪些个好用...(在CSDN文章的右侧 也有列出很多相关的文章链接)(貌似 度娘的关键字是"TensorFlow ...

  3. 《鸟哥的Linux私房菜：基础学习篇》读书笔记之第一部分

    一.如何学习Linux 1. Linux基础知识 (1) 计算机概论与硬件相关知识. (2) 先从Linux的安装与命令学起. (3) Linux操作系统的基础技能.如用户/用户组.权限.程序等概念. ...

  4. poj3304（叉积判断直线和线段相交）

    题目链接:https://vjudge.net/problem/POJ-3304 题意:求是否能找到一条直线,使得n条线段在该直线的投影有公共点. 思路: 如果存在这样的直线,那么在公共投影点作直线的 ...

  5. AMD全新32核线程撕裂者GeekBench跑分曝光：超2950X近一倍

    AMD全新32核线程撕裂者GeekBench跑分曝光:超2950X近一倍 2019年09月01日 09:36 1109 次阅读 稿源:快科技 1 条评论 https://www.cnbeta.com/ ...

  6. [转帖]Oracle 起诉 Google 事件

    Oracle 起诉 Google 事件 https://www.cnblogs.com/panchanggui/p/9449842.html Oracle 是世界第二大软件公司 世界第一大DBMS公司 ...

  7. 将mysql中一行中的几个字段 转换成一列并从其他数据库中查对应的邮件信息

    --将项目中的总监,经理,等的邮箱合并为一行 SELECT GROUP_CONCAT(t.USER_EMAIL SEPARATOR ' ') mail_address FROM portal.t_ac ...

  8. ubuntu 18.04 LTS 安装ROS系统

    不同的ubuntu系统对应着不同的ROS版本,如果装错了就会提示 E:无法定位软件包 ROS有Melodic.Lunar.Kinetic不同的种类对应着不同的ubuntu版本 Melodic主要对应: ...

  9. Vue路由传参及传参后刷新导致参数消失处理

    项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...

  10. Educational Codeforces Round 71 (Rated for Div. 2) Solution

    A. There Are Two Types Of Burgers 题意: 给一些面包,鸡肉,牛肉,你可以做成鸡肉汉堡或者牛肉汉堡并卖掉 一个鸡肉汉堡需要两个面包和一个鸡肉,牛肉汉堡需要两个面包和一个 ...