Svg初學總結

gself 發布于2019-08-01 15:22 / 1570人閱讀

摘要：原來使用插件來畫圖發現還是用實現的，打算學習了解一下，以下都是可直接在插入。和屬性可使矩形產生圓角。同時是基于矢量的，所以它能夠很好的處理圖形大小的改變

原來使用js插件來畫圖highchart.js,發現還是用svg實現的，打算學習了解一下，以下都是可直接在html插入。支持瀏覽器：Internet Explorer9，火狐，谷歌Chrome，Opera和Safari

什么是SVG？

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

SVG 用來定義用于網絡的基于矢量的圖形

SVG 使用 XML 格式定義圖形

SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失

SVG 是萬維網聯盟的標準

SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

實例操作：

矩形源碼

代碼解析:

rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性
CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色
x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1）
CSS opacity 屬性用于定義了元素的透明值 (范圍: 0 到 1)。
rx 和 ry 屬性可使矩形產生圓角。

效果圖：

圓源碼

代碼解析：
cx和cy屬性定義圓點的x和y坐標。如果省略cx和cy，圓的中心會被設置為(0, 0)
r屬性定義圓的半徑

效果圖：

橢圓源碼

代碼解析：
CX屬性定義的橢圓中心的x坐標
CY屬性定義的橢圓中心的y坐標
RX屬性定義的水平半徑
RY屬性定義的垂直半徑

效果圖

直線源碼

代碼解析：
x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束

效果圖

多邊形源碼

代碼解析：
points 屬性定義多邊形每個角的 x 和 y 坐標
fill-rule：nonzero/evenodd

效果圖

總結

這些只是簡單的了實現了基本圖形的構建，SVG是使用XML文檔描述來繪圖。從這點來看：SVG更適合用來做動態交互，而且SVG繪圖很容易編輯，只需要增加或移除相應的元素就可以了。同時SVG是基于矢量的，所以它能夠很好的處理圖形大小的改變

云服務器 GPU云服務器 SVG _svg svg過渡 svg圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49874.html

技術甜品店 - 收藏集 - 掘金

摘要：前端切圖神器前端掘金安裝前端的基礎工作就是把設計師的設計稿還原成前端頁面，所以切圖是作為一個前端的基本技能。騰訊 Web 工程師的前端書單 - 閱讀 - 掘金作者：link 2014年一月以來，自己接觸web前端開發已經兩年多了，記錄一下自己前端學習路上看過的，以及道聽途說的一些書，基本上按照由淺入深來介紹。 JavaScript 入門《JavaScript權威指南（第六版）》 ★...

Gilbertat 2019-08-20 16:40 評論0 收藏0
[譯]2018年值得關注的10大JavaScript動畫庫

摘要：幸運的是，供應似乎與需求相匹配，并且有多種選擇。讓我們來看看年值得關注的十大動畫庫。八年了，仍然是一個強大的動畫工具。接下來在這個令人驚嘆的動畫庫列表上的就是了。，通常被稱為動畫平臺，我們忽略它在列表中的排名，它是列表中最受歡迎的庫之一。原文鏈接原譯文鏈接現代網站的客戶端依靠高質量的動畫，這就使得JavaScript動畫庫的需求不斷增加。幸運的是，供應似乎與需求相匹配，并且有多種選...

Me_Kun 2019-08-23 10:33 評論0 收藏0
SVG 立方體內嵌路徑拼接

摘要：第一部分是正方體部分，第二部分是中的路徑動畫了，第三部分則是交互旋轉。然后在立方體元素上添加鼠標點擊事件事件，在回調函數中做處理內容。回調函數中先記錄下來鼠標點擊的位置。 1.前言我使用了jquery編寫交互的旋轉，因為初學所以不太承受，還請見諒。樣式我是寫stylus編碼，自動生成css。 2.正文先放上一張效果圖showImg(https://segmentfault.com...

姘存按 2019-08-23 16:48 評論0 收藏0