音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

HTML5之SVG 2D入门8—文档结构及相关元素总结
日期:2021-09-06 10:37:33   来源:脚本之家

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性。
SVG文档的元素基本可以分为以下几类:
•动画元素:animate,animateColor,animateMotion,animateTransform,set;
•解释元素:desc,metadata,title;
•图形元素:circle,ellipse,line,path,polygon,polyline,rect;
•结构元素:defs,g,svg,symbol,use;
•渐变元素:linearGradient,radialGradient;
•其他元素:a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。
其中图形元素,渐变元素,文本,图像元素和组合等都介绍过了,下面介绍另外几个与结构相关的元素。

视窗-svg元素
可以在svg元素中以任何顺序放置任何的其他元素,包括嵌套svg元素。
svg元素支持的属性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相关属性。
svg元素支持的事件也是常用的onload,onmouseover,onmousemove,onmousedown,onmouseup,onclick,onfocusin,onfocusout,onresize,onscroll,onunload等。svg元素就不多说了,完整的属性和事件列表参看后面的官方文档。

解释性元素-desc元素与title元素
每个容器元素(可以包含其他容器元素或者图形元素的元素,例如:a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和图形元素都可以包含desc和title元素,这两个元素都是辅助性的元素,用于解释相关情境;它们的内容都是文本。当SVG文档被渲染的时候,这2个元素不会被渲染到图形中。这个2个元素之间差别不是太大,title在有些实现中是作为提示信息出现的,所以通常title是放到父元素的第一个位置上。
典型的用法如下:

复制代码
代码如下:

<svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="4in"height="3in">
<g>
<title>Companysalesbyregion</title>
<desc>
Thisisabarchartwhichshows
companysalesbyregion.
</desc>
<!--Barchartdefinedasvectordata-->
</g>
</svg>

通常,最外层的svg元素要配以title说明,这样程序可读性更好。

标记-marker元素
标记定义了附加到一个或者多个顶点(path,line,polyline或者polygon的顶点)上的图形元素(箭头和多点标记)。箭头可以通过把一个标记附加到path,line或者polyline的起点或者终点上。多点标记可以把一个标记附加到path,line,polyline或者polygon的所有顶点上。

标记是由marker元素定义的,然后在path,line,polyline或者polygon中设置相关的属性(marker,marker-start,marker-mid,和marker-end)就可以了。看个例子:

复制代码
代码如下:

<svgwidth="4in"height="2in"
viewBox="0040002000"version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<markerid="Triangle"
viewBox="001010"refX="0"refY="5"
markerUnits="strokeWidth"
markerWidth="4"markerHeight="3"
orient="auto">
<pathd="M00L105L010z"/>
</marker>
</defs>
<desc>Placinganarrowheadattheendofapath.
</desc>
<pathd="M1000750L2000750L25001250"
fill="none"stroke="black"stroke-width="100"
marker-end="url(#Triangle)"/>
</svg>

下面详细看看marker的相关知识
1.marker是容器元素,可以存放任意顺序的图形元素,容器元素,动画,渐变元素等。
2.marker元素可以创建新的视窗:设置viewBox的值。
3.marker比较重要的属性:
markerUnits="strokeWidth|userSpaceOnUse"
这个属性定义了属性markerWidth,markerHeight和marker的内容使用的坐标系统。这个属性有2个值可选,第一个值strokeWidth是默认值,代表属性markerWidth,markerHeight和marker的内容使用的坐标系统的单位等于引用该marker的图形元素的stroke-width设置的值。

例如上面的例子中,marker元素的width是400,height是300,不过千万不要混淆了,mark元素中的path使用的坐标是viewBox设置的新的用户坐标系。
该属性另外一个取值userSpaceOnUse,代表属性markerWidth,markerHeight和marker的内容使用引用该marker的图形元素的坐标系统。
refX,refY:定义了引用的点与marker对齐的位置坐标。例如上面的例子中,引用的点是终点,要把它对齐到marker的(0,5)位置。注意refX,refY使用的是经过viewBox变换过的最终用户坐标系。
markerWidth,markerHeight:marker视窗的宽和高,这个很好理解。
orient:定义了marker旋转的角度。可以指定一个角度或者直接赋值auto。
auto代表x轴正方向按照下列规则旋转
a.如果marker所在的点只属于一个path,则marker的x轴正向与path走向相同。参看上面例子。
b.如果marker所在的点属于两个不同的path,则marker的x轴正向与两个path的夹角的角等分线走向一致。
4.图形元素的marker属性

图形元素要引用一个marker则需要使用相关的属性,主要是这3个:marker-start(把引用的marker放到起点),marker-mid(把引用的marker放到除起点和终点外的所有点),marker-end(把引用的marker放到终点)。这3个属性的取值可能是none(代表不引用marker),marker的引用(引用某marker),inherit(这个不用多说了)。
从上面的例子中也可以看到marker的用法。

脚本与样式-script元素与style元素
实际上,基本上所有的属性(对于所有元素,不仅是文本)都可以用CSS与一个元素关联,并且所有CSS属性都在SVG图像中可用。可以直接用样式属性设计元素的样式,或者引用样式表设计元素的样式。对XML文件来说不应该解析样式表(因为它们偶尔包含会引起问题的字符),因此需要将它们置于XMLCDATA节。脚本也是同样的道理,需要放到XMLCDATA节中。看下面的CSS例子:

复制代码
代码如下:

<svgwidth="400"height="200"xmlns="http://www.w3.org/2000/svg">
<desc>Text</desc><defs>
<styletype="text/css">
<![CDATA[
.abbreviation{text-decoration:underline;}
]]>
</style>
</defs>
<g>
<textx="20"y="50"font-size="30">Colorscanbespecified</text>
<textx="20"y="100"font-size="30">bytheir
<tspanfill="rgb(255,0,0)"class="abbreviation">R</tspan>
<tspanfill="rgb(0,255,0)"class="abbreviation">G</tspan>
<tspanfill="rgb(0,0,255)"class="abbreviation">B</tspan>values</text>
<textx="20"y="150"font-size="30">orbykeywordssuchas</text>
<textx="20"y="200">
<tspanstyle="fill:lightsteelblue;font-size:30">lightsteelblue</tspan>,
</text>
</g>
</svg>

再看脚本的例子:

复制代码
代码如下:

<svgwidth="500"height="300"xmlns="http://www.w3.org/2000/svg">
<desc>Scriptingtheonclickevent</desc>
<defs>
<scripttype="text/ecmascript">
<![CDATA[
functionhideReveal(evt){
varimageTarget=evt.target;
vartheFill=imageTarget.getAttribute("fill");
if(theFill=='white')
imageTarget.setAttribute("fill","url(#notes)");
else
imageTarget.setAttribute("fill","white");
}
]]>
</script>
<patternid="notes"x="0"y="0"width="50"height="75"
patternTransform="rotate(15)"
patternUnits="userSpaceOnUse">
<ellipsecx="10"cy="30"rx="10"ry="5"/>
<linex1="20"y1="30"x2="20"y2="0"
stroke-width="3"stroke="black"/>
<linex1="20"y1="0"x2="30"y2="5"
stroke-width="3"stroke="black"/>
</pattern>
</defs>
<ellipseonclick="hideReveal(evt)"cx="175"cy="100"rx="125"ry="60"
fill="url(#notes)"stroke="black"stroke-width="5"/>
</svg>

条件处理-switch元素
条件处理属性是能控制所在元素渲染与否的属性。基本上大多数的元素(特别是图形元素)都可以指定条件处理属性。条件处理属性有3个:requiredFeatures,requiredExtensions和systemLanguage。这些属性就是一组测试,都允许指定一个值列表(前面两个属性是空格隔开的,语言这个属性是使用逗号隔开的),默认值都为true。

SVG的switch元素提供了按指定条件渲染的能力。switch元素是一个容器元素,可以包含图形元素,解释性元素,动画元素,a,foreignObject,g,image,svg,switch,text,use等元素。switch元素会按顺序检查直接子元素的条件处理属性,然后渲染满足自身条件的的第一个子元素,其他的子元素都会被忽略。这些属性与display属性一样,只会影响直接使用这些属性的元素的渲染,不会影响引用的元素(比如use引用的元素)。简单的说,这3个属性会影响a,altGlyph,foreignObject,textPath,tref,tspan,animate,animateColor,animateMotion,animateTransform,set等元素,不会影响defs,cursor,mask,clipPath,pattern等元素(这些元素那么不是可渲染的,要么就是引用别的元素)。

注意:子元素的display和visibility属性值并不影响switch元素条件判断的结果。
条件处理属性的取值列表参看官方文档,这里就看一个小例子:

复制代码
代码如下:

<switch>
<rectrequiredFeatures="http://www.w3.org/TR/SVG11/feature#Filter"
x="10"y="10"width="322"height="502"opacity="0.6"
fill="black"stroke="none"filter="url(#gblurshadow)"/>
<rectx="10"y="10"width="322"height="502"opacity="0.6"
fill="black"stroke="none"/>
</switch>

这个例子的意思简单的说就是:使用的浏览器支持filter特性,那么就绘制上面的矩形(带filter属性),如果不支持filter特性,就绘制下面的矩形。
其实更多的时候,用的比较多的属性是systemLanguage,就是文本的多语言处理能力。例如:

复制代码
代码如下:

<svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="5cm"height="5cm">
<switch>
<textx='10'y='20'systemLanguage="de">de-HAHA</text>
<textx='10'y='20'systemLanguage="en">en-haha</text>
</switch>
</svg>

实用参考
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/
官方文档:http://www.w3.org/TR/SVG11/

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    HTMLCSSDreamweaverFrontpage