SVG stroke-linecap

屬性介紹 butt (default) round square butt (default) svg(viewbox=”-50 -50 100 100″) line(x1=-40, y1=0, x2=40, y2=0) //path 中間畫一條線比較好觀察 //M起始點 //K終點 path(d=”M-40, 00 L40, 0″) svg width: 300px height: 300px border: 1px solid #000 line stroke-width: 10 stroke: black stroke-linecap: butt path stroke: white Display round 比原本的線再多突出一個圓角 svg(viewbox=”-50 -50 100 100″) line(x1=-40, y1=0, x2=40, y2=0) path(d=”M-40, 00 […]

SVG漸層

基本方法 svg(viewbox=”-50 -50 100 100″) //defs svg描述標籤 defs linearGradient#mygra stop(offset=”5%” stop-color=”#C29979″) stop(offset=”80%” stop-color=”#c1d7ae”) circle(cx=0, cy=0, r=20) svg border: 1px solid #000 width: 500px circle fill: url(#mygra) Display 漸層方向 x1, y1→漸層起點,x2, y2→漸層終點 左往右 (default) :x1=0%, y1=0%, x2=100%, y2=0% 右往左:x1=100%, y1=0%, x2=0%, y2=0% 上至下:x1=0%, y1=0%, x2=0%, y2=100% 下至上:x1=0%, y1=100%, x2=0%, y2=0% svg(viewbox=”-50 -50 100 100″) //上至下漸層 defs […]

Animated Progress Circle

static progress circle pogress-circle-bar percentage-circle  SVG屬性解説 stroke-dasharray: 實線長度, 空白長度 svg(viewbox=”-50 -50 100 100″) line(x1=-50,y1=0,x2=100,y2=0) svg border: 1px solid #000 width: 300px height: 300px line stroke: black //stroke-dasharray也可以寫在html的line屬性裡面 stroke-dasharray: 6,15 Display 長度6長度6長度6長度6長度6長度15長度15長度15長度15 dash-strokearray也可以指定%數,100%等於整條線,所以 line stroke: black dash-strokearray: 100% 0% //這樣可以得到一條黑線 line stroke: black dash-strokearray: 0% 100% //這樣可以得到一條看不見的線 stroke-dashoffset: 偏移開始的位置 line裡面偏移數字等於x的減項 svg(viewbox=”-50 -50 100 100″) line(x1=-50,y1=0,x2=100,y2=0) svg […]

在wordpress上用文字編輯器打出svg

將編輯模式設定為全文字 Dashboard→Users→Your Profile→Disable the visual editor when writing打勾 拿掉元素之間的的換行,空格 將有空格的Html <svg viewbox=”0 0 100 100″> circle(cx=10, cy=10, r=10) </svg> 換成沒有空隙的 <svg viewbox=”0 0 100 100″>circle(cx=10, cy=10, r=10)</svg> 安裝CSS外掛寫style 推薦外掛

SVG 動畫

animate svg#pic1(viewbox=”-50 -50 100 100″) line(x1=-20, y1=0, x2=20, y2=0) line(x1=0, y1=-20, x2=0, y2=20) circle(cx=0,cy=0,r=10) //attributeName=”要動的地方” //dur=”秒數” //values=”影格” //repeatCount=”重複次數,indefinite重複無限”   animate(attributeName=”r” dur=”2s” values=”10;30;10″ repeatCount=”indefinite”) svg width: 240px border: solid 2px #pic1 stroke: black stroke-width: 3px & circle fill: white Display animateTransform & group svg#pic2(viewbox=”-50 -50 100 100″) circle(cx=0, cy=0, r=10) //group: g,Jade内子元素要縮排。animate要放在g内層 g line(x1=-20, y1=0, x2=20, y2=0) […]

SVG

常用圖形 直線:line(x1, y1, x2, y2) 矩形:rect(x, y, width, height) 圓形:circle(cx, cy, r) 橢圓:ellipse(cx, cy, rx, ry) 折線:polyline(points=”x, y; x, y”) 文字:text(x, y) Type-something VIEWBOX <!– svg(viewbox=”右上角X 右上角Y 寬度 高度”) –> svg(viewbox=”-50 -50 100 100″) circle(cx=0,cy=0,r=10) svg width: 240px border: solid 2px Display   fill:填滿 & stroke:框線 <!– svg(viewbox=”右上角X 右上角Y 寬度 高度”) –> svg(viewbox=”-50 -50 100 […]