We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SVG,即可缩放矢量图形(Scalable Vector Graphics),是一种XML应用,可以以一种简洁、可移植的形式表示图形信息。在web中常用来做动画。
在栅格图形系统中,图像被表示为图片元素或者像素的长方形数组,每个像素用RGB颜色值表示。
栅格图形的工作就像是描述哪个方格应该填充什么颜色,而矢量图形的工作则像是描述要绘制从某个点到另一个点的直线或曲线。
将栅格图形放大时,它必须以某种方式扩大每个像素,要将图形放大10倍,最简单的方式就是将每个像素放大10倍,这样会产生锯齿,效果不好。
将矢量图形放大10倍时,只需要将形状的所有坐标都乘以10,然后显示设备重新绘制它们即可。
以下是svg的基本文档结构:根元素svg以像素为单位定义了整个图像的宽高,还通过xmlns属性定义了SVG的命名空间,<title>元素的内容可以被阅读器显示在标题栏上或者是作为鼠标hover图像时提示,元素允许我们为图像定义完整的描述信息。
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <title>这里是标题</title> <desc>为图像定义完整的描述信息</desc> <!-- 在这里绘制图像 --> </svg>
接下来绘制一个圆形
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <title>这里是标题</title> <desc>为图像定义完整的描述信息</desc> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none" /> </svg>
<circle>元素表示原形,cx、cy、r分别表示圆心坐标和半径,以上示例还指定了两个样式属性:填充(fill)和轮廓画笔颜色(storke)
<circle>
<g>可以为图像分组,分组上的样式应用于分组内所有元素,除非元素本身有指定样式
<g>
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg"> <g fill="red"> <circle cx="50" cy="50" r="30" /> <circle cx="150" cy="50" r="30" /> <circle cx="250" cy="50" r="30" fill="orange" /> </g> </svg>
接着用<use>来复用上面的分组并将上面3个圆做一些变换,两个<use>都将x坐标和y坐标缩放到原来的50%,意味着原来系统坐标中的点(50, 50)现在位于(25, 25)。然后第二个<use>将x坐标往右移动了300像素,刚好做出3只米老鼠。
<use>
<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg"> <g fill="red" id="demo"> <circle cx="50" cy="50" r="30" /> <circle cx="150" cy="50" r="30" /> <circle cx="250" cy="50" r="30" fill="orange" /> </g> <use xlink:href="#demo" transform="scale(0.5, 0.5)" /> <use xlink:href="#demo" transform="scale(0.5, 0.5) translate(300 0)" /> </svg>
<polyline>元素构建了嘴巴,它的points属性接受多对x和y坐标,用逗号分隔。
<polyline>
<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 头 --> <g fill="red" id="demo"> <circle cx="50" cy="50" r="30" /> </g> <!-- 左耳 --> <use xlink:href="#demo" transform="scale(0.5, 0.5)" /> <!-- 右耳 --> <use xlink:href="#demo" transform="scale(0.5, 0.5) translate(100 0)" /> <!-- 右胡须 --> <g id="whiskers" stroke="black"> <line x1="60" y1="55" x2="100" y2="50" /> <line x1="60" y1="55" x2="100" y2="70" /> </g> <!-- 左胡须 --> <use xlink:href="#whiskers" transform="scale(-1 1) translate(-100 0)" /> <!-- 左眼 --> <circle cx="40" cy="40" r="5" fill="black" /> <!-- 右眼 --> <circle cx="60" cy="40" r="5" fill="black" /> <!-- 嘴巴 --> <polyline points="45 60, 50 65, 55 60" style="stroke: black; fill: none" /> </svg>
所有基本形状实际上都是通用的<path>元素的快捷写法,用<path>来实现米老鼠的胡须:
<path>
<path d="M100 50 L60 55 L 100 70" style="stroke: black;" />
路径翻译过来就是移动到坐标(100, 50),绘制一条直线到(60, 55),然后再绘制一条直线到(100, 70)。左边胡须同理,代码略。
由于这个图形绘制得很粗糙,用户很可能看不出这是一只米老鼠,以下示例为图像添加了文本标记。
<text>元素中,x和y用于指定文本位置。样式属性中的text-anchor指定了文本对齐方式为居中对齐。
<text>
<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 头 --> <g fill="red" id="demo"> <circle cx="50" cy="50" r="30" /> </g> <!-- 左耳 --> <use xlink:href="#demo" transform="scale(0.5, 0.5)" /> <!-- 右耳 --> <use xlink:href="#demo" transform="scale(0.5, 0.5) translate(100 0)" /> <!-- 右胡须 --> <g id="whiskers" stroke="black"> <line x1="60" y1="55" x2="100" y2="50" /> <line x1="60" y1="55" x2="100" y2="70" /> </g> <!-- 左胡须 --> <use xlink:href="#whiskers" transform="scale(-1 1) translate(-100 0)" /> <!-- 左眼 --> <circle cx="40" cy="40" r="5" fill="black" /> <!-- 右眼 --> <circle cx="60" cy="40" r="5" fill="black" /> <!-- 嘴巴 --> <polyline points="45 60, 50 65, 55 60" style="stroke: black; fill: none" /> <!-- 文本标记 --> <text x="50" y="100" style="text-anchor: middle">米老鼠</text> </svg>
SVG是一种图像格式,可以像图片一样包含在HTML页面中:
<img src="MickeyMouse.svg" title="米老鼠" />
也可以在CSS中包含SVG
div.background-mickey-mouse{ background-image:url("MickeyMouse.svg"); }
第二章:【坐标系统】
The text was updated successfully, but these errors were encountered:
No branches or pull requests
SVG,即可缩放矢量图形(Scalable Vector Graphics),是一种XML应用,可以以一种简洁、可移植的形式表示图形信息。在web中常用来做动画。
图形系统
栅格图形和矢量图形
在栅格图形系统中,图像被表示为图片元素或者像素的长方形数组,每个像素用RGB颜色值表示。

在矢量图形中,图像被描述为一系列集合形状。栅格图形的工作就像是描述哪个方格应该填充什么颜色,而矢量图形的工作则像是描述要绘制从某个点到另一个点的直线或曲线。
将栅格图形放大时,它必须以某种方式扩大每个像素,要将图形放大10倍,最简单的方式就是将每个像素放大10倍,这样会产生锯齿,效果不好。
将矢量图形放大10倍时,只需要将形状的所有坐标都乘以10,然后显示设备重新绘制它们即可。
创建SVG图像
以下是svg的基本文档结构:根元素svg以像素为单位定义了整个图像的宽高,还通过xmlns属性定义了SVG的命名空间,<title>元素的内容可以被阅读器显示在标题栏上或者是作为鼠标hover图像时提示,元素允许我们为图像定义完整的描述信息。
接下来绘制一个圆形
<circle>
元素表示原形,cx、cy、r分别表示圆心坐标和半径,以上示例还指定了两个样式属性:填充(fill)和轮廓画笔颜色(storke)分组
<g>
可以为图像分组,分组上的样式应用于分组内所有元素,除非元素本身有指定样式变换坐标系统
接着用
<use>
来复用上面的分组并将上面3个圆做一些变换,两个<use>
都将x坐标和y坐标缩放到原来的50%,意味着原来系统坐标中的点(50, 50)现在位于(25, 25)。然后第二个<use>
将x坐标往右移动了300像素,刚好做出3只米老鼠。其他基本图形
<polyline>
元素构建了嘴巴,它的points属性接受多对x和y坐标,用逗号分隔。路径
所有基本形状实际上都是通用的
<path>
元素的快捷写法,用<path>
来实现米老鼠的胡须:路径翻译过来就是移动到坐标(100, 50),绘制一条直线到(60, 55),然后再绘制一条直线到(100, 70)。左边胡须同理,代码略。
文本
由于这个图形绘制得很粗糙,用户很可能看不出这是一只米老鼠,以下示例为图像添加了文本标记。
<text>
元素中,x和y用于指定文本位置。样式属性中的text-anchor指定了文本对齐方式为居中对齐。在网页中使用SVG
SVG是一种图像格式,可以像图片一样包含在HTML页面中:
也可以在CSS中包含SVG
第二章:【坐标系统】
The text was updated successfully, but these errors were encountered: