SVG 入门教程(四) 坐标与变换

最新推荐文章于 2019-06-25 11:34:57 发布

wenzi_li

最新推荐文章于 2019-06-25 11:34:57 发布

阅读量206

点赞数

分类专栏： SVG 文章标签： XML IBM Web HTML 浏览器

SVG 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

原文出处:https://www6.software.ibm.com/developerworks/cn/education/xml/x-svg/tutorial/index.html

坐标系统和初始观察口（viewport）

元素在整个教程中都是通过坐标定位的。现在是该讨论这些坐标所适应的系统的时候了。

当首次访问文档时，用户代理（在大多数情况下，即浏览器）确定图像的观察口。观察口是文档实际可见的部分并且由一个坐标系统组成，该坐标系统以左上角的点（0，0）为原点，其正的 x 轴向右而正的 y 轴向下。坐标系统中的一个像素对应观察口中的一个像素。

有几个操作可以创建新的坐标系统。变换（接下来介绍）在被变换元素内部创建新的坐标系统，不过可以通过向文档添加另一个元素来直接创建新的坐标系统。考虑下面的示例：具有相同 x 和 y 属性的同一元素在不同的位置显示，这是因为第二个元素实际上属于另一个坐标系统，它从第一个元素偏移 100 个像素：

xml 代码

xml version="1.0"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<desc>Coordinatesdesc>
<g>
<ellipse cx="100" cy="100" rx="75" ry="60"
fill="pink" stroke="purple" stroke-width="5"
fill-opacity=".5"/>
<svg x="100" y="0">
<ellipse cx="100" cy="100" rx="75" ry="60"
fill="pink" stroke="purple" stroke-width="5"
fill-opacity=".5"/>
svg>
g>
svg>

变换

执行变换改变了元素所在的坐标系统，改变了它的外观。变换可以用来以数种方式改变元素的外观：

translate(x,y)：该变换按指定数量偏移元素。
scale(x, y)：该变换更改元素的大小。可以分别控制 x 和 y 方向上缩放量，但如果只指定一个值，那么它将用于两个方向。
rotate(n)：该变换按指定的角度旋转元素。
skewX(n)/ skewY(n) ：这两种变换根据适当的轴按指定的像素数量偏斜元素。

也可以使用矩阵指定变换，不过这超出了本教程的范围。

变换是累积的，并且既可以指定为单个变换属性的一部分也可以指定为嵌套元素的一部分，如下所示：

xml 代码

xml version="1.0"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Coordinatesdesc>
<defs>
<rect id="refBox" x="0" y="0" height="100" width="100"
stroke="purple" stroke-width="3" fill="none"/>
defs>
<g>
<g transform="scale(1, .5) translate(0, 50)">
<path stroke="purple" stroke-width="3"
d="M25 50 L 125 5 L 225 50" fill="none"/>
g>
<use xlink:href="#refBox"
transform="translate(25, 50) skewY(15)"/>
<g transform="translate(25,25)">
<g transform="skewY(-15)">
<g transform="translate(100, 79)">
<use xlink:href="#refBox"/>
g>
g>
g>
<g transform="rotate(90) translate(0, -250)">
<text font-size="35">Transform!text>
g>
g>
svg>

在这个示例中要注意的可能最重要的事就是正在变换的是实际坐标系统。对象本身实际上没有变换，但它所在的坐标系统中的更改使它看起来发生变化。考虑上面的“Transform!”文本。现在正在沿 y 方向将它平移负 250 个像素，因此显而易见文本应该消失，它会在观察口顶部以上显示。然而在平移发生前，坐标系统进行了 90 度旋转，所以负的 y 值实际上使文本向右移动了 250 个像素。

用 viewBox 缩放

没有任何更改时，初始观察口指定一个大小，其左上方坐标为 0,0，右下方坐标为介于该大小值与 0,0 之间的像素数目。但有时候期望的效果是按可用的大小（不管大小是多少）而不是按图像进行缩放。那就要用到 viewBox 属性了。

viewBox 属性重新映射观察口，它指定将在观察口左上角和右下角出现的新值。请记住：当在 Web 页面上放置 SVG 图形时，标记的尺寸决定观察口的大小。

例如，如果眼睛和眼镜添加了 viewBox 属性，如下所示：

xml 代码

xml version="1.0" standalone="no"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300px" height="200px"
viewBox="50 0 350 200" preserveAspectRatio="xMinYMin"
xmlns="http://www.w3.org/2000/svg">
<desc>ViewBoxdesc>
<defs>
<linearGradient id="lineGradient">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="yellow" />
linearGradient>
. . .
页面会在任何分配给该图像的框内显示图像，进行适当的缩放。因此下面的 Web 页面：
<html>
<head><title>SVG Demonstrationtitle>head>
<body>
<object type="image/svg+xml" data="test.svg"
height="100" width="300">
<img src="NonSVG.gif" alt="SVG 图像静态版本" />
object>
<object type="image/svg+xml" data="test.svg"
height="100" width="100">
<img src="NonSVG.gif" alt="SVG 图像静态版本" />
object>
<object type="image/svg+xml" data="test.svg"
height="300" width="300">
<img src="NonSVG.gif" alt="SVG 图像静态版本" />
object>
body>
html>

以不同大小显示该图像三次：

preserveAspectRatio 属性确定如何实现缩放。none 值将使图像伸展以适应框，即使这样会引起图像失真。xMinYMin值（如上所示）将图像的最小 x 和 y 值与框的最小 x 和 y 值对齐。其它可能的值有 xMinYMid、xMinYMax、xMidYMin、xMidYMid（缺省值）、xMidYMax、xMaxYMin、xMaxYMid 和 xMaxYMax。

原文出处: https://www6.software.ibm.com/developerworks/cn/education/xml/x-svg/tutorial/index.html

wenzi_li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG 入门教程(四) 坐标与变换

原文出处:https://www6.software.ibm.com/developerworks/cn/education/xml/x-svg/tutorial/index.html 坐标系统和初始观察口（viewport）元素在整个教程中都是通过坐标定位的。现在是该讨论这些坐标所适应的系统的时候了。当首次访问文档时，用户代理（在大多数情况下，即浏览器）确定图像的观察口。观察口是文档实际...
复制链接

扫一扫

专栏目录