[求助]SVG相关 - ASP.NET技术论坛

楼主

问题点数：0 回复次数：7

[求助]SVG相关

什么是SVG啊？谁有这反面的介绍资料？

有学历资料或者源码提供的就更好啦！！

搜索更多相关主题的帖子: SVG　

第 2 楼

得分:0

SVG图形可以是动态的、可交互性的。动画通过直接声明（比如在SVG里嵌入SVG动画元素）或通过脚本来进行定义或触发。
SVG通过使用脚本语言来完成比较复杂的应用，脚本语言调用SVG对象模型(SVG Document Object Model)来访问或控制所有的元素、属性和属性值。事件处理器如onmouseover、onclick等可以应用到SVG图形对象上，由于SVG和其它Web标准完全兼容和同步，如XML，CSS2，XSLT，DOM2，SMIL，XLINK，HTML等。因此，在同一Web页面上，有些特性，如脚本编程等，可以同时应用在XHTML和SVG元素上。
SVG不但可以表现图象，还可以表现文字、音频等其它信息，对于那些有视觉障碍的人，可以通过可替换的方法把图象替换为音频信息，这样对那些有视觉障碍的人，也能够得到SVG所表现的信息。另外，对那些手持设备、车载设备、无线设备来说，它们的屏幕一般都比较小，而且显示分辨率低，SVG的矢量特性也可以让这些设备清楚地浏览SVG图象信息，这都是目前的位图图象所不能做到的。对于那些不能显示图象的显示设备，SVG也有可替代的显示方法。因此，SVG格式的图象具有很高的可访问性。

本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!

第 3 楼

得分:0

SVG的含义
SVG是可升级矢量图形（Scalable Vector Graphics）的简称。
可升级（Scalable）意味着统一地增加或减少。对图象来说，可升级意味着图象尺寸并不限定固定的大小，对互连网（Web）来说，可升级意味着一个特殊的技术，它能够增加文件数量、用户数量和应用的种类。SVG作为Web上的一个技术之一，可升级含有这两方面的意思。
SVG图象可升级到不同的显示的分辨率，例如：相同尺寸的SVG图象，打印输出使用高分辨率，而在屏幕显示时可以使用不同的分辨率。同一个SVG图象能够以不同的尺寸放到同一页面上，也可以被不同的其它页面所使用。我们可以放大一个SVG图象，来了解其精美的细节信息。通过下面图形的对比可清楚地看到差别：

图片附件: 游客没有浏览图片的权限，请登录或注册

SVG是可升级的，原因还在于：同一段SVG内容，既可以是独立的图象，也可以被引用到一个页面，也可以嵌入到另外的SVG图象中。因此，一个复杂的SVG图象可以有多部分组成，也可以由多人共同完成。符号、标记、字体能够重复利用图形的某些组成部分，这样可以充分利用HTTP的缓存优势。
矢量图象包含有诸如直线和曲线等几何对象。这相对于以象素保存信息的位图格式的图象（如PNG、JPEG）来说有更大的灵活性。矢量格式图象的最大好处就是，它可以和位图图象集成在一起，也可以把他们和矢量信息结合在一起以产生更加完美的图象。SVG也不例外。
由于所有的显示器都是基于点阵的，位图图象和矢量图象的差别就归结为他们是在客户端还是在服务器端进行图象展现处理；SVG能够控制图象展现的过程，不致于出现粗糙或带锯齿的图象。SVG还能够提供客户端的滤镜效果。
大多数XML语法描绘的都是文字信息或原始数据，他们不能提供图象的能力，SVG能够提供丰富的、结构化的矢量和矢量与图象混合的图象信息。
XML是W3C的推荐标准，用于结构化的信息交换，已经得到广泛的普及和应用。SVG是建立在此基础上的，有很明显的优势，比如：广泛的国际化基础，强大的结构化能力，以及对象模型等。
样式单能够很好地控制文字的外在表现方式,它的灵活性、快速下载和易于维护的特性早已被人们接受，SVG把这种技术扩展到了图象世界中。脚本编程、DOM对象和CSS样式单的组合常被人们称作Dynamic HTML，广泛应用在动画制作、交互性和外在的表现效果中，SVG也可以借助脚本语言进行操纵文档对象和样式单。

本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!

第 4 楼

得分:0

SVG的图形对象
使用XML，可以很方便地建立模型。对文本格式的语法来说，模型通常是建立在段落级和短语级，而不是在独立的名词、副词或者是音素上。SVG是在图形对象级建立图象模型而不是独立的许多点。
SVG提供了一个通用的path元素，可以用来创建各种类型的图形对象，但同时也提供了一些基本的形状元素如矩形和椭圆等，这些基本形状对编写代码是非常方便的，也可以应用在复杂的路径描绘中。SVG提供对坐标系统的精确控制，图象对象的定义和变换都是在这个坐标系统之中。
SVG中的符号
SVG也能够提供一些象电子、绘画和流程图等使用的标准符号，但目前的版本并没有提供这些。SVG允许用户创建和共享他们的符号库，设计者能够清楚地知道他们使用的符号的外在表现，而不必担心那些不支持的符号。符号也可以以不同的尺寸和角度使用，也可以为了达到与其他的图形对象相互组合而进行重新定义样式。
SVG的展现效果
许多Web中使用的图象都是依靠图形工具包来创建模糊、阴影、光线等效果的，要在客户端展现这些效果是不可思义的。SVG可以单独地或以组合的方式对滤镜效果进行描述，这些效果可以用在客户端，当SVG图象展现的时候展现这些效果，而图象仍可以以图象的分辨率的进行缩放和显示。
SVG的文字
丰富的图形效果有时候会在很大程度上依赖于所使用的特定的文字和文字间距。大多数情况下，图象设计者为了防止图象上的被别人替换，往往会把文字转换成图象，原来的文字也就变成了不可搜索和访问的了。SVG的标准制定者在听取了设计者们的意见后，在SVG中保留了文字元素，这样，文字和图象都被分别进行展现。
SVG的动画
动画可以通过脚本语言操纵文档中元素来实现，但脚本的编辑和交换通常很麻烦。SVG和SYMM工作组经过集思广益，共同在SVG中定义了动画元素，这样，在网页图形中常用的动画效果就可以在SVG中使用。

本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!

第 5 楼

得分:0

有学习资料或者源码吗？
谢谢啦！！

MSN：wkm821215@ OICQ：49297869 ^_^

第 6 楼

得分:0

aHvorafA.rar (343.36 KB) [求助]SVG相关

看看这个吧，也许对你有帮助，SVG在国外是个很好的技术，可是在国内好像还没有什么太多的应用，资料不是很好找，不过网上还是有很多的，你到网上好好的找找吧

本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!

第 7 楼

得分:0

1、鼠标事件（演示鼠标事件的使用方法，以及常用的事件）

请看下面的例子：

<script><![CDATA[

function mout()

{

alert("you are out");

}

]]></script>

</g>

</svg>

用IE打开上面的SVG文件，当你的鼠标移开红色的矩形框的时候，将会弹出提示信息"you are out"。

下面给出常见的鼠标事件和其触发条件。

onmouseout
当鼠标移开一个物体(element)的时候触发该事件

onmousedown
当在一个物体(element)上按下鼠标键时触发该事件

onmouseup
当在一个物体(element)上松开鼠标键时触发该事件

onmousemove
当鼠标在一个物体(element)上移动时触发该事件

onclick
当鼠标点击物体(element)的时候将触发该事件

更多的事件请参看http://www.w3.org/TR/SVG/interact.html。

对鼠标事件需要注意的是有时候可能同时有几个事件同时发生，我们可以通过试验得出响应事件的执行顺序。

2、放大、缩小（演示脚本语言对SVG中相关元素的属性控制）

SVG的浏览器插件带有放大、缩小的功能，但是在实际的应用中，我们需要自己编程实现SVG图象文件的放大、缩小。下面的例子通过SVG的更改viewbox属性来实现放大、缩小功能。（处理函数放在父HTML文件中）

SVG文件:1.svg

<g>

</g>

</svg>

HTML文件：aa.html

<html><head><title>SVG事件</title>

<body >

function fda()

{

var SvgMainMapDoc=id1.getSVGDocument();

var OverMapview=SvgMainMapDoc.getElementById("mainview");

OverMapview.setAttribute("viewBox","100 50 200 100");

}

function sxiao()

{

var SvgMainMapDoc=id1.getSVGDocument();

var OverMapview=SvgMainMapDoc.getElementById("mainview");

OverMapview.setAttribute("viewBox","-200 -100 800 400");

}

</script>

</body>

</html>

用IE打开aa.html，按下放大，缩小按钮将可以看到放大、缩小的效果。HTML中通过getSVGDocument()获取SVG文档的DOM(文档对象模型)，然后再通过getElementById和ID来获取element的指针，然后通过setAttribute来设置element（即本例中ID为mainview的svg元素）。上面用到的几个函数都是DOM函数，更多的DOM函数及介绍可以在http://pilat.free.fr/routines/js_dom.htm上获得。

下面介绍一下通过viewbox放大、缩小的原理。Viewbox中有四个数字，分别表示最小的x坐标，y坐标，最大x坐标和最小x坐标之差，最大y坐标和最小y坐标之差。也就是说viewbox表示的是当前的显示范围，因此只要改变viewbox的值就可以实现SVG图象的放大和缩小。

3、属性查询、高亮显示

属性查询在现实中有着许多的应用，通过查询可以得出我们感兴趣的东西。下面介绍如果实现对SVG属性的查询。

SVG文件:1.svg

</g>

</svg>

HTML文件：aa.html

<html><head><title>查询SVG属性</title>

<body >

function search(searchvalue)

{

var SvgMainMapDoc=id1.getSVGDocument();

SvgObj=SvgMainMapDoc.getElementById('g1');

SvgObj1=SvgObj.getChildNodes;

for(iCount=1;iCount<((SvgObj1.length)-1);iCount+=2)

{

if(SvgObj1.item(iCount).getAttribute("name")==searchvalue)

{

SvgStyle1=SvgObj1.item(iCount).getStyle();

SvgStyle1.setProperty('fill','green');

}

function clearaa()

{

var SvgMainMapDoc=id1.getSVGDocument();

SvgObj=SvgMainMapDoc.getElementById('g1');

SvgObj1=SvgObj.getChildNodes;

for(iCount=1;iCount<((SvgObj1.length)-1);iCount+=2)

{

SvgStyle1=SvgObj1.item(iCount).getStyle();

SvgStyle1.setProperty('fill','red');

}

</script>

</form>

</body>

</html>

用IE打开aa.html，输入查询的值如”a1”，选择查询将可以看到有两个矩形高亮显示，这是查询的结果。清除可以消除高亮显示。

下面分析一下查询的过程。通过getSVGDocument()获取SVG文档的DOM(文档对象模型)，然后再通过getElementById和ID（”id1”）来获取element的指针，再通过getChildNodes来获得其子节点，最后通过item(序号)来访问其子节点，并逐个判断其name属性的值是否跟要查询的值相同，从而决定是否高亮显示。这里需要注意的是子节点的序号是从1开始，并且以2递增的。

本来无一物，何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!

第 8 楼

得分:0

谢谢啦！

我这也是没办法了。我们接了个项目，要用到sps，和svg。公司都没人搞过，大家也只是有点了解。
逼着老大带着我们整天扒资料，现学现搞！！

MSN：wkm821215@ OICQ：49297869 ^_^