這篇文章主要介紹“SVG用戶交互性怎么應(yīng)用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“SVG用戶交互性怎么應(yīng)用”文章能幫助大家解決問題。
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、曲江網(wǎng)絡(luò)推廣、微信小程序、曲江網(wǎng)絡(luò)營銷、曲江企業(yè)策劃、曲江品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供曲江建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
交互性
SVG擁有良好的用戶交互性，例如：
1. SVG能響應(yīng)大部分的DOM2事件。
2. SVG能通過cursor良好的捕捉用戶鼠標(biāo)的移動。
3. 用戶可以很方便的通過設(shè)置svg元素的zoomAndPan屬性的值來實現(xiàn)縮放等效果。
4. 用戶可以很方便的把動畫和事件結(jié)合起來，完成一些復(fù)雜的效果。
通過給SVG元素掛接事件，我們可以使用腳本語言方便的完成一些交互任務(wù)。SVG支持大部分的DOM2事件，例如：onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll等事件。除了這些，SVG還提供了獨有的動畫相關(guān)的事件，比如：onroom,onbegin,onend,onrepeat等。
事件大家比較熟悉，就不多說了。
動畫的方式
SVG采用的是使用文本來定義圖形，這種文檔結(jié)構(gòu)非常適合于創(chuàng)建動畫。要改變圖形的位置、大小和顏色，只需要調(diào)整相應(yīng)的屬性就可以了。事實上，SVG有為各種事件處理而專門設(shè)計的屬性，甚至很多還是專門為動畫量身定做的。在SVG中，實現(xiàn)動畫可以有下面幾種方式：
1. 使用SVG的動畫元素。這個下面會重點介紹。
2. 使用腳本。采用DOM操作啟動和控制動畫，這個已經(jīng)是一門成熟的技術(shù)了，后面有一個小例子。
3. SMIL(Synchronized Multimedia Integration Language)。
下面的例子包含了SVG中幾種最基本的動畫：
復(fù)制代碼 代碼如下:
把這段代碼放到html文檔的body中運行一下就可以知道動畫的效果。
動畫元素的公共屬性
第一類：指定目標(biāo)元素和屬性
xlink:href
這個應(yīng)該是很熟悉了，指向執(zhí)行動畫的元素。這個元素的必須是在當(dāng)前的SVG文檔片段中定義的。如果沒有指定這個屬性的話，動畫會應(yīng)用到自己的父元素上。
attributeName = "
這個屬性指定了應(yīng)用動畫的屬性。如果該屬性有namespace的話(不要忘了，SVG本質(zhì)是XML文檔)，這個namespace也要加上。例如下面的例子中分別給xlink起了不同的別名，這里animate指定屬性的時候就帶了namespace：
復(fù)制代碼 代碼如下:
attributeType = "CSS | XML | auto(默認值)"
這個屬性指定了屬性取值的命名空間，這幾個值的含義如下：
CSS：代表attributeName指定的屬性是CSS屬性。
XML：代表attributeName指定的屬性是XML默認命名空間下的屬性(注意svg文檔本質(zhì)上是xml文檔)。
auto：代表先在CSS屬性中查找attributeName指定的屬性，如果沒找到，則在默認的XML命名空間下尋找該屬性。
第二類：控制動畫時間的屬性
下列屬性都是動畫時間屬性；它們控制了動畫執(zhí)行的時間線，包括如何開始和結(jié)束動畫，是否重復(fù)執(zhí)行動畫，是否保存動畫的結(jié)束狀態(tài)等。
begin = "begin-value-list"
該屬性定義了動畫的開始時間?？梢允欠痔柗珠_的一系列時間值。也可以是一些其他觸發(fā)動畫開始的值。比如事件，快捷鍵等。
dur = Clock-value | "media" | "indefinite"
定義了動畫的持續(xù)時間?？梢栽O(shè)置為以時鐘格式顯示的值。也可以設(shè)置為下列兩個值：
media：指定動畫的時間為內(nèi)部多媒體元素的持續(xù)時間。
indefinite：指定動畫時間為無限。
時鐘格式指的是下列這些合法的取值格式：
復(fù)制代碼 代碼如下:
:30:03= 2 hours, 30 minutes and 3 seconds
:00:10.25 = 50 hours, 10 seconds and 250 milliseconds
:33 = 2 minutes and 33 seconds
:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds
.2h= 3.2 hours = 3 hours and 12 minutes
min = 45 minutes
s = 30 seconds
ms = 5 milliseconds
.467= 12 seconds and 467 milliseconds
.5s = 500 milliseconds
:00.005 = 5 milliseconds
end = "end-value-list"
定義了動畫的結(jié)束時間?？梢允欠痔柗珠_的一系列值。
min = Clock-value | "media"
max = Clock-value | "media"
設(shè)置了動畫持續(xù)時間的最大最小值。
restart = "always" | "whenNotActive" | "never"
設(shè)置了動畫能否隨時重新開始。always代表動畫可以隨時開始。whenNotActive代表只能在沒播放的時候重新開始，比如前一次播放結(jié)束了。never表示動畫不能重新開始。
repeatCount = numeric value | "indefinite"
設(shè)置了動畫重復(fù)的次數(shù)。 indefinite代表無限重復(fù)。
repeatDur = Clock-value | "indefinite"
設(shè)置重復(fù)的總的動畫時間。indefinite代表無限重復(fù)。
fill = "freeze" | "remove(默認值)"
設(shè)置了動畫結(jié)束后元素的狀態(tài)。freeze表示動畫結(jié)束后元素停留在動畫的最后狀態(tài)。remove代表動畫結(jié)束以后元素回到動畫前的狀態(tài)，這個是默認值。
第三類：定義動畫值的屬性
這些屬性定義了被執(zhí)行動畫的屬性的取值情況。其實是定義了關(guān)鍵幀和插值的一些算法。
calcMode = "discrete | linear(默認值) | paced | spline"
定義了動畫插值的方式：discrete:離散的，不插值；linear：線性插值；paced：步長插值；spline:樣條插值。默認是linear(線性插值)，但是如果屬性不支持線性插值，則會采用discrete插值方式。
values = ""
定義了以分號分隔的動畫關(guān)鍵幀的值列表。支持向量值。
keyTimes = ""
定義了以分號分隔的動畫關(guān)鍵幀的時間列表。這個和values是一一對應(yīng)的。這個值是受插值算法影響的，如果是線性(linear)和樣條插值(spline)，則keyTimes的第一個值必須是0，最后一個值必須是1。對于離散(discrete)的不插值的方式，keyTimes的第一個值必須是0。對于步長插值方式，很顯然是不需要keyTimes。而且如果動畫的持續(xù)時間設(shè)置為indefinite，則忽略keyTimes。
keySplines = ""
這個屬性定義了樣條插值(貝塞爾插值)時的控制點，顯然只有在插值模式選擇為spline才起作用。這個列表中的值取值范圍是0到1。
from = "
to = "
by = "
定義動畫屬性的起始值，結(jié)束值和步長值。這里需要注意：如果values已經(jīng)制定了相關(guān)的值，則任何的from/to/by值都會被忽略。
第四類：控制動畫是否是增量式的屬性
有時候，如果相關(guān)的值設(shè)置的不是絕對值，而是增量值是非常有用的，使用additive屬性可以達到這個目的。
additive = "replace(默認值) | sum"
這個屬性控制了動畫是否是增量式的。sum表示動畫會較大相關(guān)的屬性值或者其他低優(yōu)先級的動畫上。replace是默認值，表示動畫會覆蓋相關(guān)的屬性值或者其他低優(yōu)先級的動畫?？匆粋€小例子：
復(fù)制代碼 代碼如下:
additive="sum"/> 這個例子演示了矩形width遞增的動畫效果。 有時候，如果重復(fù)的動畫結(jié)果是疊加起來的，也非常有用，使用accumulate屬性可以達到這個目的。 accumulate = "none(默認值) | sum" 這個屬性控制了動畫效果是否是累積的。none是默認值，表示重復(fù)的動畫不累積。sum表示重復(fù)的動畫效果是累積的。對于單次執(zhí)行的動畫，該屬性沒有意義?？磦€小例子： 復(fù)制代碼 代碼如下: additive="sum" accumulate="sum" repeatCount="5"/> 這個例子演示了矩形的長度在每次迭代中都在增加。 動畫元素小結(jié) SVG提供了下列動畫元素： 1. animate元素 這個是最基本的動畫元素，可以直接為相關(guān)屬性提供不同時間點的值。 2. set元素 這個是animate元素的簡寫形式，支持所有的屬性類型，尤其是當(dāng)對非數(shù)字型的屬性(例如visibility)進行動畫時很方便。set元素是非增量的，相關(guān)的屬性對之無效。 to指定的動畫結(jié)束值類型一定要符合屬性的取值類型。 3. animateMotion元素 路勁動畫元素。這個元素大多數(shù)屬性都和上面一樣，只有下面幾個稍微有點區(qū)別： calcMode = "discrete | linear | paced | spline" 這個屬性的默認值不同，在該元素中默認的是paced。 path = " 動畫元素移動的路徑，格式與path元素的d屬性的值的格式是一致的。 keyPoints = " 這個屬性的值是一系列分號給開的浮點數(shù)值，每個值的取值范圍是0~1。這些值代表了keyTimes屬性指定的對應(yīng)時間點移動的距離，這里距離具體是多少是由瀏覽器自己決定的。 rotate = 這個屬性指定了元素移動時旋轉(zhuǎn)的角度。默認值是0，數(shù)字代表旋轉(zhuǎn)的角度，auto表示隨著路勁的方向轉(zhuǎn)動物體。auto-reverse表示轉(zhuǎn)向與移動方向相反的方向。 此外animateMotion元素的from,by,to,values的值都是坐標(biāo)對組成的；x值與y值之間用逗號或空格分開，每個坐標(biāo)對之間用分號隔開比如from="33,15"表示起點x坐標(biāo)為33，y坐標(biāo)為15。 指定運動路徑的方式有兩種：一種為直接給path屬性賦值，一種為使用mpath元素作為animateMotionde的子元素指定路徑。如果同時使用這兩種方式，則使用mpath元素優(yōu)先級高。這兩種方式優(yōu)先級都比values,from,by,to高。 看一個小例子： 復(fù)制代碼 代碼如下: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 4. animateColor元素 顏色動畫元素。這是一個過時的元素，基本上所有功能都可以用animate代替，所以還是不要用了。 5. animateTransform元素 變換動畫元素。看看特殊的一些屬性： type = "translate | scale | rotate | skewX | skewY" 這個屬性指定了變換的類型，translate是默認值。 from,by和to的值相應(yīng)的都是對應(yīng)變換的參數(shù)，這個還是與前面講的變換是一致的。values則是一組分號隔開的這樣的值系列。 支持動畫效果的元素和屬性 基本上所有圖形元素(path,rect,ellipse,text,image...)，容器元素(svg, g, defs, use, switch, clipPath, mask...)都支持動畫?；旧洗蠖鄶?shù)的屬性都支持動畫效果。詳細的說明請參看官方文檔。 使用DOM實現(xiàn)動畫 SVG動畫也可以使用腳本完成，DOM的詳細內(nèi)容后面會介紹，這里簡單看一個小例子： 復(fù)制代碼 代碼如下: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 關(guān)于“SVG用戶交互性怎么應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
網(wǎng)頁題目：SVG用戶交互性怎么應(yīng)用
鏈接地址：http://weahome.cn/article/jppoee.html
重慶分公司
重慶分公司
