xml矢量图 svg的viewBox和vml的coordsize,虚坐标系

原创 2007年09月13日 10:21:00
 
SVG:
viewBox是SVG的虚坐标系,比VML的简单不少。
为根节点svg元素加上viewBox属性后,在svg下的各图形元素的大小和位置都是按viewBox限定的坐标,而不是页面的实际坐标。
如:
<svg width="100px" height="100px" viewBox="0 0 300 300">
<g>
 <rect x="5" y="15" width="200" height="200"/>
</g>
</svg>
在100x100的svg区域中,放入一个200x200的方块,按理不能正常显示,会被裁去一部分。但是因为加入了viewBox属性,svg区域会完整显示rect。可以理解为在svg中加入一个新坐标系,按上例把svg划分为300x300份,rect占用200x200份,而不是像素,实际图形会缩放或拉伸。
 
VML:
coordsize和coordorigin设定VML的虚坐标系,一般放置于v:group元素内,也常用于v:shape等。前一个决定把实际的像素区域划分为多少份,后一个决定原点的位置。
如:
<v:group style="position:relative;width:200px;height:200px;" coordsize= "100,1000">
<v:rect style="WIDTH:20px;HEIGHT:500px" fillcolor="#000000">
</v:group>
在200x200px的区域内,出现了一个40x100px的黑块,因为coordsize的出现,ie忽略了px单位,rect仍然按coordsize划分的份。VML默认以左上为(0,0)原点,在上面的例子加入coordorigin,可以指定原点,黑块的位置也会改变。
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

xml矢量图 svg的viewBox和vml的coordsize,虚坐标系

SVG: viewBox是SVG的虚坐标系,比VML的简单不少。 为根节点svg元素加上viewBox属性后,在svg下的各图形元素的大小和位置都是按viewBox限定的坐标,而不是页面的...

html矢量图 SVG VML 介绍

观看者:想了解html矢量图知识的同学 目标:了解html矢量图知识,svg和vml 兼容方案。 实现方式:代码及相关文字解释。 最近web项目需要一些流程图的支持,于是研究了一下这部分东西,觉得...

关于qt如何显示svg矢量图片中的中文

今天终于拿到svg格式的矢量图,之前使用开发板最多只能输出1024*768分辨率的图像,而显示器是1920*1080的分辨率,显示起来非常不清楚,于是想到用矢量图。 可是矢量图到手之后,简直就是噩梦...

Android Vector Drawable | SVG 矢量图

Android Vector Drawable | SVG 矢量图What is SVGSVG(全称:可缩放矢量图形 Scalable Vector Graphics),是用于描述矢量图形的一种图形格...

初识SVG矢量图

一:什么是SVG以及的特点 (1)SVG指可伸缩矢量图形(Scalable Vector Graphics) (2)SVG 用来定义用于网络的基于矢量的图形 (3)SVG 使用 XML 格式定义...

SVG矢量图技术简介

  • 2011-03-31 16:53
  • 38KB
  • 下载

Android开发 之 矢量图动画SVG(细节版)

矢量图动画SVG 矢量图 VectorDrawable集成Drawable是图片信息;矢量图动画AnimatedVectorDrawable也是集成drawable,只不多它里面封装了drawabl...

黄石公园SVG矢量图

  • 2013-05-21 16:52
  • 2.09MB
  • 下载

在 Android 中使用 SVG 矢量图

前言 如何使用 下载好的文件是这样的 把这个文件导入 AS 中即可使用 SVG 绘制动画demo 演示 使用的第三方库 具体实现过程请看源码 SVGDemo 前言:SVG 格式图片很多优点,但是 an...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)