標籤彙整：SVG

SVG, Uncategorized

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 L40, 0")


svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke-width: 10
  stroke: black
  stroke-linecap: round
 path
  stroke: white

Display

square

比原本的線再多突出一個角
（白色中線是原本的線長）


svg(viewbox="-50 -50 100 100")
 line(x1=-40, y1=0, x2=40, y2=0)
 path(d="M-40, 00 L40, 0")


svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke-width: 10
  stroke: black
  stroke-linecap: square
 path
  stroke: white

Display

SVG, Uncategorized

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
  linearGradient(x1="0%" y1="0%" x2="0%" y2="100%")#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

漸層範圍：gradientUnits

  • objectBoundingBox (default)：只有指定物件上色
  • userSpaceOnUse：整個svg上色，指定的物件擷取一部份svg的漸層呈現

Display
gradientUnits=”objectBoundingBox” (default)：只有指定物件上色

gradientUnits=”userSpaceOnUse”：整個svg上色，指定的物件擷取一部份svg的漸層呈現

注意：line漸層

line的漸層必須使用userSpaceOnUse（整個svg上色），否則漸層無效


svg(viewbox="-50 -50 100 100")
 defs
  //由上到下
  //必須使用userSpaceOnUse
  linearGradient(x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse")#mygra5
    stop(offset="5%" stop-color="#C29979")
    stop(offset="30%" stop-color="#c1d7ae")
 line(x1="0" y1="-20" x2="0" y2="50")


svg
 border: 1px solid #000
 width: 300px
 line
  stroke: url(#mygra5)
  stroke-width: 3

Display

CSS, SVG, Uncategorized

Animated Progress Circle

發表迴響

static progress 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
 border: 1px solid #000
 width: 300px
 height: 300px
 line
  stroke: black
  stroke-dasharray: 6,15
  //向左縮了5
  //等於x1-5，x2-5
  stroke-dashoffset: 5

Display
↓ 向左縮了5，等於x1-5，x2-5

進階：圓形版

stroke-dashedarray

圓形的stroke-dashedarray 100%不是整條圓周，整條圓周的%算法是

//等於圓周長*100%
svg半徑(r)*2*3.14*100%

所以

svg(viewbox="-50 -50 100 100")
  circle(cx=0,cy=0,r=40)

svg
  border: 1px solid #000
  width: 300px
circle
  fill: none
  stroke: black
  stroke-dasharray: calc(40* 3.14 * 2 * 100%)
  //100%加不加都沒差，反正圓周總長度=圓周長

可以得到一個圓框

svg
  border: 1px solid #000
  width: 300px
circle
  fill: none
  stroke: black
  stroke-dasharray: 0% calc(40* 3.14 * 2 * 100%)

則可以得到一個透明圓框

circle: stroke-dashoffset

圓形預設由正右方往下畫出來的，所以要往上偏移25%的長度

//往上偏移25%的長度
svg半徑(r)*2*3.14*25%

動態圓形百分比

注意事項

  • 圓形從正右邊開始往下畫，不是從正上方開始往下，所以要用stroke-dashoffset偏移適當距離
  • 半徑×6.28×指定%數=實線長度，其餘部分為虛線長度
  • 動畫起始値為實線0，虛線長等於圓周長
svg(viewbox="-50 -50 100 100")
  circle(cx=0,cy=0,r=20)
  text(x=-11,y=4) 80%

svg
  border: 1px solid #000
  width: 300px
  circle
    fill: none
    stroke: #90a955
    animation: apc 5s infinite
  text
    font-size: 10px
    fill: #90a955
    
  
@keyframes apc
  0%
    //動畫裡面不知為何不能用calc
    //圓周長20*2*3.14=125.6
    //80%圓周長125.6*0.8=100.48
    //20%圓周長125.6*0.2=25.12
    //往上偏移25%：125.6*25%=31.4
    stroke-dasharray: 0,125.6
    stroke-dashoffset: 31.4
  100%
    stroke-dasharray: 100.48,25.12
    stroke-dashoffset: 31.4

Display
80%

SVG, Uncategorized

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)
  line(x1=0, y1=-20, x2=0, y2=20)
  rect(x=-20, y=-20, width=40, height=40)
  //attributeName="transform"
     //type="scale or rotate ..."
     //dur="秒數"
     //values="影格"
  //repeatCount="重複次數，indefinite重複無限"
  animateTransform(attributeName="transform" type="rotate" dur="2s" values="0;360" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px
 
#pic2
 stroke: black
 stroke-width: 3px

 & circle
  fill: white

 & rect
  fill: none

Display

begin：指定開始時間，産生錯落效果

//begin: 開始秒數，也可以指定負數，這樣開始時就可以直接動
svg#pic4(viewbox="0 0 200 200")
 rect(x=0, y=0, width=20, height=100)
  animate(attributeName="height" begin="0s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=30, y=0, width=20, height=120)
  animate(attributeName="height" begin="-0.3s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=60, y=0, width=20, height=140)
  animate(attributeName="height" begin="-0.6s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=90, y=0, width=20, height=160)
  animate(attributeName="height" begin="-0.9s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=120, y=0, width=20, height=120)
  animate(attributeName="height" begin="-1.2s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=150, y=0, width=20, height=80)
  animate(attributeName="height" begin="-1.5s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=180, y=0, width=20, height=60)
  animate(attributeName="height" begin="-1.8s" dur="2s" values="100;200;100" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px

Display

SVG, Uncategorized

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 100")
 circle(cx=0,cy=0,r=10)

svg
 width: 240px
 border: solid 2px
 & circle
   fill: none
   stroke: black

Display

id & 共用屬性

<!-- svg(viewbox="右上角X 右上角Y 寬度 高度") -->
svg#pic1(viewbox="-50 -50 100 100")
 circle(cx=0,cy=0,r=10)
 line(x1=-20, y1=0, x2=20, y2=0)
svg
 width: 240px
 border: solid 2px

#pic1
 stroke: black
 & circle
   fill: none

Display