SVG 坐标系统

  在了解SVG坐标系统之前,要先熟悉三个概念: SVG中 世界,视野(viewbox),视窗(viewport).

  SVG中的世界就是一个无限大的画布,我们可以在上面画任何东西。因为在svg元素中,我们可以写任意的代码,绘制无数的图形。代码的数量,是由你决定的, 你想写多少就写多少,无数的图形肯定是无限大。

  视窗(viewport),则是浏览器要显示多大的区域,开辟多大的空间来渲染我们绘制的图形,也就是我们想要展示了出来哪一部分内容给用户看。我们在写svg元素的时候,都会指定宽度和高度,如<svg width=‘300‘ height=‘200‘ ></svg> ,width和height 就是决定的视窗的大小。300,200 都要是数字,没有单位,它默认是px, 就是300px, 200px. 在SVG中,如果只有数字,没有单位,那么单位就是px. 当然,你可以指定单位,单位除了px, 还有em, pt 等,如 width=‘300pt‘; width和height 还可以取百分比值,如50%, 如果svg 是根元素,它对应的就是浏览器的窗口的宽度和高度,和position:fixed 固定定位取值一样,如果不是根元素,则对应的是父元素的宽度和高度。

  视野定义的则是我以多大的视角来看浏览器绘制来的区域(viewport). 浏览器把元素绘制到屏幕上后,它就放到那里了,不会再变化了.但是我们要怎么看,是近看,还是远看。这和照像是一个道理,我们站在摄影师指定的位置就不会再动了,摄影师想怎么看就怎么看,它可以拉近镜头,那么我们在相机中就是显示特别大,他也可以镜头放 远一点,这时在相机里,我们就显示的特别小。我们定义视野,就是相当于摄影师调节镜头。视野的定义就是给SVG 设置一个属性viewBox, 它的取值就 x轴的坐标,y轴的坐标,宽度和高度,如 <svg width="4cm" height="5cm" viewBox="0 0 64 80">可以看到它也是定义了一个矩形的视野,视窗也是一个矩形, 我们透过一个矩形去看另一个矩形,好操作一些。默认情况下, 视窗和视野是一样大的。

  当视野(viewbox) 和视窗不一样大的时候,它分为两种情况: 等比例和不等比例。

  等比例:视野的  width/height = = 视窗的width/height

  我们先画一个图形,它没有viewBox

<svg width=‘4cm‘ height=‘5cm‘ style="border:1px solid blue">
    <rect x="10" y="35" width="40" height="40" style="stroke: black; fill: none;"/>
    <polyline points="10 35, 30 7.68, 50 35" style="stroke:black; fill: none;"/>
  <polyline points="30 75, 30 55, 40 55, 40 75" style="stroke:black; fill: none;"/>
</svg>

   表现形式如下:

  现在加上viewBox,由于是等比例,4/5 = 64/80,所以viewBox设为 0 0 64 80 , 给svg 加上viewBox

<svg width=‘4cm‘ height=‘5cm‘ style="border:1px solid blue" viewBox=‘0 0 64 80‘>

  可以看到图形变大了,几乎占满了整个视窗。

  当加上viewbox后,就相当于在viewport 前面加上一个镜子,镜子的宽度和高度就是viewBox的宽度和高度(64,80),由于它比原来视窗(viewport)的宽度和高度(4cm~=150px, 5cm ~=180px)的小, 所以就相当于放大了整个图形。也可以理解为它对整个坐标系统进行重新分配,X轴上原来的刻度尺是0-150px 变为0-64px, Y轴上由原来的0-180px变为了0-80px;

  当我们的viewBox等比例放大到比viewport 大的时候 ,如 0 0 384 480 整个图就会变小。

<svg width=‘4cm‘ height=‘5cm‘ style="border:1px solid blue" viewBox=‘0 0 384 480‘>

  图片小的几乎看不到了。

时间: 2024-09-30 11:16:42

SVG 坐标系统的相关文章

【外翻 】svg 的坐标系统

http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/笛卡儿坐标系统 数学中的坐标系统是这样的 原点在左下角 SVG坐标系统 svg的坐标系统 原点在左上角 SVG 坐标系统的单位 你可以指定在SVG坐标系单位.你到处都可以指定一个坐标(x和y位置,宽度和高度等).您指定的单位价后,例如10厘米或125毫米. 如果不指定任何单位协调值后,单位被认为是像

SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理

20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web 设计时,我们还需要做一些优化来使得 SVG 变得更加轻量. 下面介绍的 20 个工具,可以帮助你快速有效的创建 SVG 图像.现有的在线工具已经可以帮助我们进行优化.转换.新建模式等工作. 更详细的介绍,参见:How To Create SVG Animation Using CSS 交互式 SVG

理解SVG坐标系统和变换: transform属性

SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transform属性和CSS属性,包括如何使用,以及你必须知道的关于SVG坐标系变换的知识. 这是我写的SVG坐标系统和变换部分的第二篇.在第一篇中,包括了任何要理解SVG坐标系统基础的需要知道的内容:更具体的是, SVG viewport, viewBox 和 preserveAspectRatio 属性.

SVG基本图形

SVG 是使用 XML 来描述二维图形和绘图程序的语言 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 SVG坐标系统: 一.圆 <svg width="50" height="50"> &l

2014/08/22 – SVG

一.项目功能需求:将 HTML 中 span 元素集合映射成 SVG 格式文件. 参数: span 的绝对定位坐标和 transform 的集合,贝塞尔曲线的锚点绝对定位坐标和控制点绝对定位坐标(根据曲线路径绘制 span ),span 集合父容器的宽度和高度. 输出: svg 的字符串形式. 二.知识点:由于涉及到 css 的 transform 样式,所以会用 Matrix 的相关理论知识. 1. 沿着路径变化的文字: svg 中提供了 <textPath> 元素来产生文字沿着某条事先定义

svg的坐标系统

最近做一个流程图绘制项目,所以研究了一下svg.发现svg目前浏览器支持的挺强大的,但是svg本身有很多背景知识和元素属性以及js库等,如何系统地掌握这一强大工具呢? viewPort(视窗)和viewBox(视野) 这两个词的翻译还是比较好的!你站在屋子里通过窗户来看外面的世界.窗户的大小是固定的,比如是400*200,可外面的世界是无限大的!那是不是你就只能看到窗户大小般的世界和井底之蛙一般呢?如果真是这样,那viewBox就没用了.想想看,如果你里窗户越远,是不是看到的越多呢?当你和窗户津

SVG渐变

前面的话 给SVG元素应用填充和描边,除了使用纯色外,还可以使用渐变.本文将详细介绍SVG渐变 线性渐变 有两种类型的渐变:线性渐变和径向渐变.必须给渐变内容指定一个id属性,否则文档内的其他元素不能引用它.为了让渐变能被重复使用,渐变内容需要定义在<defs>标签内部,而不是定义在形状上面 线性渐变沿着直线改变颜色,要插入一个线性渐变,需要在SVG文件的defs元素内部,创建一个<linearGradient> 节点 <svg height="70" v

SVG

一.SVG技术背景 随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输.接收和利用它们的基础.图形.图像是信息数据可视化的主要方式.但现有的图形.图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制.交互式以及实时动态方面的应用等.SVG正是在这样的背景下诞生的. SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形.图像标准.它虽然是一种二维矢量图形格式,但其中可以包

基于SVG的票面设计器开发总结

今天周六,原则上要休息,但想到下周还有一堆任务,还是先做一部分工作吧,就把之前做的票面设计器改了改,增加了上传图片和更换背景底图的功能.现在打算整理下这个设计器,也算对齐一个总结.不过这属于我们部门的产品,代码我使用截图的方式多一些.首先来看一下我做的这个票面设计器的最终效果图: 从截图中可以看到在页面里,专业点叫我在画布里增加了很多的元素,这些元素都与剧院票务相关包括项目.场次.地点,二维码等信息.上面的word截图是我今天做的功能,背景图我也换成了自定义的图片.光看这个页面其实不难做,因为页