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

Leave a Reply

Your email address will not be published. Required fields are marked *