程序博客网 > 微信web开发工具 mac

SVG文件

来源：互联网 发布：微信web开发工具 mac 编辑：程序博客网 时间：2024/05/22 07:45

Scalable Vector Graphics（可缩放矢量图形）是基于XML，用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。SVG本身允许包含3种图形对象类型：

  1. 矢量图形，包括矩形、圆、椭圆、多边形、直线、任意曲线等。
  2. 嵌入外部图像，包括png、jpeg、svg等。
  3. 文本。



1、 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

2、SVG 文件可通过以下标签嵌入 HTML 文档：<embed>（推荐在HTML5中，允许使用脚本）、<object>（支持HTML4，XHTML和HTML5标准，不允许使用脚本） 或者 <iframe>（推荐在HTML5中使用，允许使用脚本）。

     SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。

3、在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。SVG不能直接嵌入到Opera。

4、

运行结果：

代码如下：

<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>  </body></html>
第二种情况：

运行结果：


代码如下：

<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="50"><!--SVG文档的大小是右下角为最后的上下边界-->   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>  </body></html>

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。默认情况下，SVG其子元素的大小 多大，完全会显示出来。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释：所有的开启标签必须有关闭标签！

第三种情况：

运行结果为：


代码为：

<!DOCTYPE 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>
其中另一种写法为：
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">   <circle cx="100" cy="50" r="40" style="fill:rgb(255,0,0);stroke-width:2;stroke:rgb(0,0,0)" /></svg>  </body></html>

二、SVG中子标签

 矩形 - <rect>

1、
代码如下：
<!DOCTYPE html><html><body><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文档中某形状的大小是右下角为最后的上下边界--></svg> </body></html>
其中style的另两种写法为：<rect width="300" height="100" style="fill:blue;stroke-width:1;stroke:black" />
    ：stroke="black" stroke-width="2" fill="red"
代码解析:
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色

2、
fill-opacity透明度属性的使用，其实fill-opacity是不透明性的值，即不透明的值越小，透明的值就越大。取值范围（0-1），代码如下：
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <rect x="50" y="20" width="150" height="100" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /></svg> </body></html>

代码解析：
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
<rect x="50" y="20" width="150" height="150"  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
中的opacity定义了元素的透明值。 (范围: 0 到 1)。


3、
<rect x="50" y="20" rx="50" ry="40" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
其中：
  • rx 和 ry 属性可使矩形产生圆角。

SVG 圆形 - <circle>

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

1、
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /></svg></body></html>

代码解析：

  • CX属性定义的椭圆中心的x坐标
  • CY属性定义的椭圆中心的y坐标
  • RX属性定义的水平半径
  • RY属性定义的垂直半径
运行结果为：


SVG 直线 - <line>

1、
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /></svg></body></html>
运行结果为：

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

SVG 多边形 - <polygon>

1、
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /></svg></body></html>
  • points 属性定义多边形每个角的 x 和 y 坐标
  • 注意：坐标值是按角的顺时针写的。
运行结果为：


使用 <polygon> 元素创建一个星型:
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="190">  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/></svg></body></html>

运行结果为：



改变 fill-rule 属性为 "evenodd":
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/></svg></body></html>
运行结果为：



五角星的另一种画法顺序：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px">    <polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:red;stroke:black;stroke-width:1;fill-rule:nonzero"/>  </svg>


points="100,0 160,180 10,60 190,60 40,180"，起始点是最上方的点，然后是右下，最左边，最右边，再到左下。把这些点按顺序连起来就变成了五角星。
结果为：



先看看官方文档里面fill-rule两个属性的解释，

nonzero—这个规则通过从canvas上的某个点往任一方向绘制射线到无穷远，然后检查图形的线段和射线相交的点，来确定“内部区域”。从0开始计数，每次路径线段是从左到

右穿过射线就加一，从右到左的就减一。通过计算交叉点，如果结果是0，则这个点在路径外边，不然，就是在里边。

evenodd—这个规则通过从canvas上某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；

如果是偶数，该点在图形外部。



一看两幅图，你可能会有两个疑问，这些线段的箭头是什么？两组图形的第三幅图为什么是一样的？其实这些线段的方向是由我们给出的坐标的顺序决定的，points="100,0

 160,180 10,60 190,60 40,180"，起始点是最上方的点，然后是右下，最左边，最右边，再到左下。把这些点按顺序连起来就变成了五角星。

先在图上随机取几个点，蓝色射线的起始点就是随机的点，射线1,2,3,4穿过的图形线段数分别是1,2,3,4，如图


先看nozero时，怎么判断点是否在内部区域。射线1和图形线段只有一个交点，为从左到右，所以结果是1，判定为内部区域；射线2有两个交点，都是从左到右，结果是2，内

部区域；射线3有三个交点，两个从左到右，一个从右到左，结果是1，内部区域；射线4有四个交点，两个从左到右，两个从右到左，结果是0，所以是外部区域。

evenodd时，只判断交点个数，所以1,3都是内部区域，2，4都是外部区域。


结果就很清楚啦，那两组图的第三个图为什么是一样的，也一目了然啦，在圆环内的点，与图形线段的交点有两个，一左进右出，一右进左出，所以两种判定方式下都是外部区

域。

SVG 曲线 - <polyline>

1、<polyline> 元素是用于创建任何只有直线的形状：
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /></svg></body></html>

运行结果：



曲线style中fill是干嘛使得：
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:blue;stroke:red;stroke-width:4" /></svg></body></html>

运行结果如下：



<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:blue;stroke:black;stroke-width:3" /></svg></body></html>

运行结果为：



SVG 路径 - <path>

1、

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。


<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <path d="M150 0 L50 200 L225 200 Z" /></svg></body></html>
结果为：



修改：
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">  <path d="M150 0 L75 200 L225 200 Z" style="fill:blue; stroke:red; stroke-width:5 "/></svg></body></html>

将画笔移动到指定坐标位置 -> 画一条直线到指定坐标位置 -> 再画一条曲线 -> 完成后抬起画笔结束
结果为：

疑问：
1、
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <path d="M150 0 L225 100 L75 200 Z" /></svg></body></html>
结果为：


2、没看懂代码
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450"><path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />  <!-- Mark relevant points -->  <g stroke="black" stroke-width="3" fill="black">    <circle id="pointA" cx="100" cy="350" r="3" />    <circle id="pointB" cx="250" cy="50" r="3" />    <circle id="pointC" cx="400" cy="350" r="3" />  </g>  <!-- Label the points -->  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">    <text x="100" y="350" dx="-30">A</text>    <text x="250" y="50" dy="-10">B</text>    <text x="400" y="350" dx="30">C</text>  </g></svg></body></html>

运行结果为：


3、xmlns和xlink两者命名空间的理解是什么？
<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink">  <a xlink:href="https://www.baidu.com/" target="_blank">    <text x="0" y="15" fill="red">I love SVG</text>  </a></svg> </body></html>
运行结果：文字I love SVG是连接到了百度网页

属性的小总结：
fill---------------------------是定义的填充色，支持“none”、“current-color”值或颜色。不支持梯度。
stroke----------------定义如何绘制元素。支持“none”、“current-color”值或颜色。不支持阵列和梯度。
text-------------------文本颜色是笔画颜色定义的颜色，如果没有明确定义笔画颜色，则使用填充颜色。（<textx="0"y="15"fill="red">在平坦的路上曲折前行</text>x="0" y="15" 是文字定位坐标；）


0 0
微信web开发工具 mac 微信web开发工具 mac
原创粉丝点击
热门IT博客
个性化推荐算法接口个性化推荐算法接口
网络电视好不好网络电视好不好
截取视频片段软件
mac隐藏的照片在哪里
windows me安装教程
网络教育综合平台
禁止软件联网win10
mac 桌面的东西删不掉
上海公务员难考吗 知乎
python格式化输出连接
origin软件免费下载
淘宝退款骗局揭秘
滴滴有抢单软件吗
网络用语gb是什么意思
iphones怎么设置4g网络
现货知乎
drgs分组器软件
大数据平台功能设计
推荐几个精仿的淘宝店
java开发技术大全 pdf
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 北瓜的功效与作用 北瓜和南瓜的区别 北瓜饼的做法家常做法 减肥吃北瓜 北瓜的做法大全家常菜 吃北瓜减肥吗 什么是北瓜 炒北瓜的做法大全家常 北瓜包子的做法 北瓜的做法大全 北瓜电话显示什么号码 北瓜馒头的做法大全 北瓜电话下载 北瓜吃多了好处和坏处 北瓜减肥吗 北瓜的做法大全家常 越瓜 北田 北电分数线 北电杨祺如 北电侯亮平 北电表演系 北电明星 北电磨煤机 北影北电 北电和北影 北电校花杨祺如 北电艺考放榜 北电96明星班名单 北电成立调查组 北电艺考时间 北电研究生招生简章 北电考研辅导班 洪佳宁被北电退学 北疆 南疆北疆 北疆旅游 北疆草原 北疆硅藻泥 南疆和北疆 北疆饭店

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里