WPF使用SVG簡單整理

2022-02-11 10:42:50 字數 1903 閱讀 8817

一、svg是什麼

它的英文全稱為scalable vector graphics,意思為可縮放的向量圖形。

具體參考:

二、svg製作

3、使用inkscape軟體 

這個軟體在處理svg明顯強大的多,有詳細幫助文件和示例,具體參考官網。 

三、wpf裡使用svg

我常用的有三種方式:

1、單個圖示的svg,

2、直接載入svg檔案,就像載入路徑一樣

需要使用svg檔案的庫:

3、將svg轉換為xaml並將其與原生wpf物件一起使用

首推inkscape軟體能儲存為xaml檔案,wpf裡面直接使用。

也可以使用開源工具:svgtoxaml 轉換為drawingimage 資源

簡單舉例乙個轉換例子,漸變背景加乙個圖示。如下:

"

svg_drawingimage

">

"m0,0 v353 h152 v0 h0 z

">

"f0 m152,353z m0,0z m43.986,167.058c53.875,167.058 61.892,175.092 61.892,185.002 61.892,194.912 53.875,202.946 43.986,202.946 34.097,202.946 26.08,194.912 26.08,185.002 26.08,175.092 34.097,167.058 43.986,167.058z

">

"26.0803,185.0014

"endpoint="

61.8916,185.0014

"absolute

"spreadmethod="

pad"

opacity="

1">

"#ff3feaaf

"offset="

0" />

"#ff0be873

"offset="

0.73549999999999993

" />

"#ffffffff

"geometry="

f1 m152,353z m0,0z m51.162,175.539l36.302,175.539 32.233,182.101 43.492,196.465 55.739,182.099 51.162,175.539z m43.747,176.506l48.205,181.798 39.734,181.798 43.747,176.506z m39.298,181.436l37.053,176.106 43.339,176.106 39.298,181.436z m48.258,182.366l43.52,194.536 39.5,182.366 48.258,182.366z m38.904,182.366l43.086,195.027 33.161,182.366 38.904,182.366z m48.809,182.514l48.827,182.536 48.899,182.366 54.767,182.366 43.908,195.104 48.809,182.514z m49.137,181.798l51.283,176.703 54.837,181.798 49.137,181.798z m50.899,176.154l48.667,181.453 48.649,181.446 44.151,176.107 50.865,176.107 50.899,176.154z m36.51,176.279l38.835,181.798 33.088,181.798 36.51,176.279z

" />

"" />

總結:推薦inkscape設計svg檔案,功能強大同時能匯出很多種格式。

簡單使用SVG

在前端的工作過程中經常會使用一些圖示。在之前我們曾用過兩種方式 純css,iconfont。使用是一種簡單的方式,然而卻有樣式不好調整,資源較大的缺點。純css只能實現較簡單的圖形,多用before after實現,優點是體積小,缺點是每次使用都是手寫,調整太浪費時間。iconfont是阿里的乙個圖...

SVG裝置簡單介紹

一 svg的效果 svg是典型的電力電子裝置,由三個基本功能模組構成 檢測模組 操控運算模組及補償輸出模組。其作業原理為由外部ct檢測體系的電流資訊,然後經由操控晶元分析出當前的電流資訊 如pf s q等 然後由操控器給出補償的驅動訊號,最後由電力電子逆變電路組成的逆變迴路宣布補償電流。svg停止無...

svg簡單的應用

1 可以直接在html內寫svg 1 width寬度,height高度 2 xmlns svg的規則 2 rect節點 1 長方形 2 x y位置 3 rx ry圓大小 4 fill填充顏色 3 circle節點 1 圓形 2 cx cy位置 3 r圓直徑 4 fill填充顏色 4 path畫線節點...