HTML5 笔记二

最新推荐文章于 2024-06-17 13:37:54 发布

B-Candy

最新推荐文章于 2024-06-17 13:37:54 发布

阅读量84

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/bomiaomiao/article/details/51824684

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

SVG基础知识

什么是是SVG？

可伸缩的矢量的图形；
用来定义用于网络的基于矢量的图形；
使用xml格式定义图形；
图像在放大或者缩小情况下，图形质量不会改变；
万维网联盟的标准；

SVG文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<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>

SVG 代码解析：
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是”独立的”，或含有对外部文件的引用。
standalone=”no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以元素开始，包括开启标签和关闭标签。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。
注释：所有的开启标签必须有关闭标签！

SVG在HTML页面

svg文件可以通过<embed><object><iframe>引入到文件中。

//优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<embed src="svg.svg" type="image/svg+html"></embed>
//优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准.缺点：不允许使用脚本。
<object data="svg.svg" type="image/svg+html"></object>
//优势：所有主要浏览器都支持，并允许使用脚本。缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<iframe src="svg.svg"></iframe>

直接将svg写在html页面中。

<html>
 <body>

 <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>

 </body>
 </html>

链接到svg文件：<a href="circle1.svg">View SVG file</a>

SVG矩形-`<rect>`

实例一

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色

实例二

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>

x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）（个人这里有个问题，什么是笔触颜色？？求解）

实例三

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>

CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

实例四

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

rx 和 ry属性可使矩形产生圆角。

SVG圆形-`<circle>`

<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>

cx 和 cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置成(0,0)；
r 属性定义圆的半径；

SVG椭圆-`<ellipse>`

待续。。。

B-Candy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 笔记二

SVG基础知识什么是是SVG？可伸缩的矢量的图形；用来定义用于网络的基于矢量的图形；使用xml格式定义图形；图像在放大或者缩小情况下，图形质量不会改变；万维网联盟的标准；SVG文件<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/
复制链接

扫一扫