原创 SVG_29_徑向漸變radialGradient
知識點： radialGradient 用來定義徑向漸變，以對圖形元素進行填充或描邊。 說人話，就是定義輻射性漸變，就是以一個點爲圓心，向周圍進行顏色漸變。前面有文章講解了線性漸變，有興趣的可以點擊查看：lineGradient線性漸變-
2020-05-25 02:48:20
原创 SVG_25_520
今天是個好日子。 本篇文章公衆號發文時間爲：2020年5月20日5:20 也算是我業餘時間玩SVG的一個小里程碑。 （原因：算是掌握了在公衆號文章發佈效果的技巧，摸了好多天吶）。 以後將會有更多更好的效果展示出來，耶！ Xi
2020-05-25 02:48:20
原创 SVG_26_SVG的靈活運用
今天不發效果圖了，來聊一聊SVG的靈活運用。 這篇文章好幾天前就看到了，思前想後，感覺還是說一下，畢竟這個腦回路還是很讚的。 具體是怎麼回事呢？ 有個程序猿想寫一個監控服務器的網頁，想着能不能用小程序實現。按照規定，小程序請求地址必須在開
2020-05-25 02:48:20
原创 SVG_22_marker標籤定義標識_如箭頭
知識點： marker標籤中，有以下幾個主要屬性 refx屬性爲x軸的偏移量，即箭頭與線的偏移，0表示接觸； 當refx爲0時： 當refx爲12時： 一對比，效果立馬明白了吧。 refy屬性爲Y軸的偏移量，一般設置爲圖形
2020-05-18 21:38:32
原创 SVG_24_pattern標籤_使fill填充_stroke描邊多姿多彩
知識點 pattern標籤 定義：使用預定義的圖形對一個對象進行填充或描邊，就要用到pattern元素。pattern元素讓預定義圖形能夠以固定間隔在x軸和y軸上重複（或平鋪）從而覆蓋要塗色的區域。先使用pattern元素定義圖案，然
2020-05-18 21:38:32
原创 SVG_23_mpath標籤_軌跡複用
知識點： mpath標籤 定義：<animateMotion> 元素的mpath子元素使<animateMotion> 元素能夠引用一個外部的<path>元素作爲運動路徑的定義。 下方的指示箭頭是利用mpath標籤畫好路線軌跡，然
2020-05-18 21:38:32
原创 SVG_16_defs標籤_use標籤_style標籤_紅綠燈效果
知識點： defs標籤 SVG 允許我們定義以後需要重複使用的圖形元素。建議把所有需要再次使用的引用元素定義在defs元素裏面。這樣做可以增加SVG內容的易讀性和可訪問性。在defs元素中定義的圖形元素不會直接呈現。 你可以在你的視口
2020-05-17 03:34:47
原创 SVG_18_a標籤_clipPath標籤_限制路徑效果
知識點： <a>標籤 <clipPath>標籤 先說a標籤 使用 SVG 的錨元素 (<a>) 定義一個超鏈接。 由於這個元素和 HTML 的 <a> 標籤 使用了相同的標籤名，當使用 CSS 或 querySelector 選擇
2020-05-17 03:34:47
原创 SVG_20_牛頓擺球
公衆號原文：SVG_20_牛頓擺球 知識點： 讓一個控件根據指定路線，循環往復的移動，適用於不復雜的路徑。 有兩個方法： 其一， 通過 animateMotion的路徑閉合Z； <animateMotion path="M-40 0
2020-05-17 03:34:47
原创 SVG_21_逐行展示_觀滄海
今天做了一個逐行展示的效果，一行行的顯示，主要使用了animate標籤，其中每一個animate標籤都是指id，然後下一個animate的begin=“上一個id.end”，然後fill="freeze"表示按照動畫結尾的效果凍結。
2020-05-17 03:34:47
原创 SVG_17_留言欄搖擺_地震
這篇文章本該2020年5月12日發出的，奈何工作太忙，沒來得及發出，但公衆號準時發文了。 原理：利用動畫animate控制svg的高度，在指定時間內變換高度即可達到效果。 點擊下方鏈接查看效果 公衆號_Xi說SVG_SVG_17_留言欄搖
2020-05-17 03:34:47
原创 SVG_19_太陽_地球_月亮_三球儀_自轉_公轉
公衆號原文：公衆號_Xi說SVG_SVG_19_太陽_地球_月亮_三球儀 本次實現的三球儀，太陽、地球、月亮都是有自轉效果的，地球和月亮也都有自己的公轉。 我定義了漸變色來顯示出三顆球體的自轉，但由於在文章中展示不出效果，所以改爲了純
2020-05-17 03:34:47
原创 IE瀏覽器設置記住OA用戶名和密碼的方法
原文地址：https://www.78oa.com/help/help800.html 感覺寫的非常詳細，遂轉載。 在確保個人電腦制只有自己數據比較安全的情況下可以在瀏覽器中設置記住OA的用戶名和密碼，這樣每次在登錄OA時不用再重複輸
2020-05-15 14:06:06
原创 SVG_13_14_15_套圖展示_你看我漂亮嗎_斗羅大陸史萊克七怪
SVG_13、14、15在公衆號：Xi說SVG裏面是發了三篇文章的，在CSDN裏面，由於無法展示效果，所以集合在一篇文章裏面了。 實現原理：svg定製了click事件，當點擊時，控制圖片的隱藏顯示達到效果。大家可以靈活應用。 上效果圖
2020-05-10 06:52:57