`
jacally
  • 浏览: 770128 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

    博客分类：
  • SVG
XMLIBMWebHTML浏览器 
阅读更多

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

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

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

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

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

xml 代码
  1. <!---->xml version="1.0"?>  
  2. <!---->
  3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
  4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  
  5.      
  6.   <desc>Coordinatesdesc>  
  7.   <g>  
  8.      <ellipse cx="100" cy="100" rx="75" ry="60"    
  9.            fill="pink" stroke="purple" stroke-width="5"  
  10.            fill-opacity=".5"/>  
  11.               
  12.      <svg x="100" y="0">  
  13.         <ellipse cx="100" cy="100" rx="75" ry="60"    
  14.            fill="pink" stroke="purple" stroke-width="5"  
  15.            fill-opacity=".5"/>  
  16.      svg>  
  17.   g>  
  18. svg>  
  19.   
  20.   

 

变换

 

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

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

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

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

xml 代码
  1. <!---->xml version="1.0"?>  
  2. <!---->
  3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
  4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"  
  5.                       xmlns:xlink="http://www.w3.org/1999/xlink">  
  6.      
  7.   <desc>Coordinatesdesc>  
  8.   <defs>  
  9.      <rect id="refBox" x="0" y="0" height="100" width="100"    
  10.                 stroke="purple" stroke-width="3" fill="none"/>  
  11.   defs>  
  12.   <g>  
  13.      <!---->  
  14.      <g transform="scale(1, .5) translate(0, 50)">  
  15.          <path stroke="purple" stroke-width="3"    
  16.               d="M25 50 L 125 5 L 225 50" fill="none"/>  
  17.      g>  
  18.         
  19.      <!---->  
  20.      <use xlink:href="#refBox"    
  21.             transform="translate(25, 50) skewY(15)"/>  
  22.         
  23.      <!---->  
  24.      <g transform="translate(25,25)">  
  25.        <g transform="skewY(-15)">  
  26.          <g transform="translate(100, 79)">  
  27.             <use xlink:href="#refBox"/>  
  28.          g>  
  29.        g>  
  30.      g>  
  31.         
  32.      <!---->  
  33.      <g transform="rotate(90) translate(0, -250)">  
  34.        <text font-size="35">Transform!text>  
  35.      g>  
  36.         
  37.   g>  
  38. svg>  

 

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

 

用 viewBox 缩放
 

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

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

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

xml 代码
  1. <!---->xml version="1.0" standalone="no"?>  
  2. <!---->
  3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
  4. <svg width="300px" height="200px"    
  5.      viewBox="50 0 350 200" preserveAspectRatio="xMinYMin"  
  6.      xmlns="http://www.w3.org/2000/svg">  
  7.   <desc>ViewBoxdesc>  
  8.   <defs>  
  9.   
  10.      <linearGradient id="lineGradient">  
  11.         <stop offset="0%" stop-color="red" />  
  12.         <stop offset="100%" stop-color="yellow" />  
  13.      linearGradient>  
  14. . . .    
  15.   
  16. 页面会在任何分配给该图像的框内显示图像，进行适当的缩放。因此下面的 Web 页面：   
  17.   
  18. <html>  
  19.   <head><title>SVG Demonstrationtitle>head>  
  20.   <body>  
  21.      
  22.   <object type="image/svg+xml" data="test.svg"    
  23.                               height="100" width="300">  
  24.      <img src="NonSVG.gif" alt="SVG 图像静态版本" />  
  25.   object>  
  26.   
  27.   <object type="image/svg+xml" data="test.svg"  
  28.                               height="100" width="100">  
  29.      <img src="NonSVG.gif" alt="SVG 图像静态版本" />  
  30.   object>  
  31.   
  32.   <object type="image/svg+xml" data="test.svg"  
  33.                               height="300" width="300">  
  34.      <img src="NonSVG.gif" alt="SVG 图像静态版本" />  
  35.   object>  
  36.   
  37.   body>  
  38. html>  
  39.   
  40.   

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

 

 

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
分享到：
| SVG 入门教程(一) 基本形状
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    SVG经典教程2 (SVG从入门到精通)

    本教程“SVG经典教程2”是SVG学习的初级教程，旨在帮助初学者深入理解并掌握SVG的核心概念和实用技巧。 ### 1. SVG的基本概念 SVG图像由一系列几何形状组成，如线条、矩形、圆形、曲线等，这些形状在放大或缩小时仍...

    SVG 入门教程(一) 基本形状

    这篇"SVG入门教程(一) 基本形状"将引导我们走进SVG的世界，了解如何创建和操作SVG的基本图形。 首先，SVG图像由一系列几何形状构建，包括直线、曲线、圆形、椭圆、矩形、多边形和路径等。在SVG中，这些基本形状通过...

    SVG 入门教程(三) 绘制

    这篇“SVG入门教程(三) 绘制”显然是系列教程的一部分，旨在帮助初学者掌握如何使用SVG进行图形绘制。在本教程中，我们将深入探讨SVG的基本绘图元素和方法。 SVG的优势在于其矢量特性，这意味着无论放大多少倍，...

    svg入门pdf文档

    ### SVG入门PDF文档知识点梳理 #### 一、SVG简介 - **定义**：SVG（Scalable Vector Graphics）是一种基于XML的语言，用于描述二维矢量图形。它由W3C组织制定并维护，当前版本为1.1。 - **特点**： - 可缩放性：...

    SVG 入门教程(二) 定义和组

    在本篇SVG入门教程(二)中，我们将深入探讨SVG（Scalable Vector Graphics）的基本概念，以及如何在SVG中定义和组织元素。SVG是一种基于XML的矢量图像格式，它允许我们创建可缩放、高质量的图形，适用于网页和其他...

    HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述

    SVG中的坐标系统是理解和开发SVG图形的基础，其中包括视窗坐标系与用户坐标系，以及它们之间的变换。 在SVG中，存在两套坐标系统：视窗坐标系和用户坐标系。视窗坐标系是一个无限延伸的坐标系，它的原点位于视窗的...

    svg绘图资料

    这篇资料集包含了关于SVG绘图技术的详细描述，旨在帮助学习者从入门到精通，掌握SVG的各种绘图技巧和交互性应用。 SVG的基本元素包括形状（如矩形、圆形、线条、路径等）、文本、渐变、滤镜和动画。在SVG中，你可以...

    svg essentials

    SVG提供了多种坐标变换功能，如平移、缩放、旋转和倾斜等，这些变换可以帮助开发者创建复杂且动态的图形效果。 ##### 7.1 平移变换 使用`translate`变换可以改变图形的位置。例如： ```xml &lt;svg width="100" ...

    SVG画图手册（生物信息分析用）

    - 生物信息学中的数据可视化往往需要对图形进行精确的调整，坐标变换提供了实现这一目标的工具。 3. **裁剪**： - 裁剪允许仅显示指定区域内的图形内容，这对于突出显示图形的特定部分非常有用。 - 在展示大型...

    HTML5之SVG 2D入门8—文档结构及相关元素总结

    - `svg`: SVG根元素，定义图形视口和坐标系统。 - `symbol`: 定义可复用的图形符号，通常用于`&lt;use&gt;`元素引用。 - `use`: 引用并重复使用`&lt;defs&gt;`或`&lt;symbol&gt;`中的图形。 5. **渐变元素**： - `linearGradient`...

    计算机图形学基础教程源码

    3. **颜色与坐标系统**：源码可能涵盖了颜色理论和坐标系统的使用。颜色可以通过RGB、HSV等模型表示，而坐标系统则是描述图形位置的关键，包括笛卡尔坐标系统和极坐标系统。 4. **变换**：在计算机图形学中，图形的...

    asymptote用户手册

    - **高性能渲染**：支持多种图形格式输出，包括PDF、SVG等，适用于各种出版需求。 - **丰富的编程功能**：提供了诸如路径、变换、函数等高级编程特性，允许用户创建复杂的图形算法。 #### 三、Asymptote 使用基础 ...

    D3.js数据可视化实战手册.epub

    第1章，D3入门指南，是D3.js预热。它涵盖了一些基本概念，诸如D3.js是什么，以及如何搭建一个适用于D3.js数据可视化程序的开发环境等。 第 2章，精挑细选，向你介绍了D3数字可视化中最基本的一项操作——选集。选集...

    画轴对称图形.doc

    总结来说，轴对称图形是几何学和计算机图形学中的重要概念，涉及了反射对称、坐标变换和图形组合等一系列理论和技术。理解和掌握这些知识，无论是对于学术研究还是实际应用，都能带来很大的帮助。

Magicbox
Global site tag (gtag.js) - Google Analytics