SVG <line> 直線
通過<line>標籤可以繪製一條直線。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0px; padding: 0px; } svg { border:1px dotted #ccc; margin:50px; } </style> </head> <body> <svg width="220" height="80" > <line x1="0" y1="0" x2="200" y2="60" stroke-width=1 stroke="red"/> </svg> </body> </html>
程式碼執行效果截圖如下:
上述程式碼繪製了一條傾斜的直線,簡單介紹如下:
(1).(x1,y1):規定直線的起點座標。
(2).(x2,y2):規定直線的終點座標。
(3).stroke-width:規定直線的粗細,屬性值是數字,預設單位是畫素。
(4).stroke:規定直線的顏色。
相關文章
- SVG 繪製直線SVG
- svg在line直線上應用漸變SVG
- SVG <polyline> 繪製折線SVG
- SVG繪製直線簡單介紹SVG
- SVG <linearGradient> 線性漸變SVG
- SVG繪製1px直線模糊問題SVG
- svg給直線應用線性漸變失效解決方案SVG
- 流動的SVG線條SVG
- svg 線條動畫淺嘗SVG動畫
- SVG 線條動畫入門SVG動畫
- 交叉線和直連線
- SVG 設定線條樣式SVG
- SVG線性漸變程式碼SVG
- 簡單的SVG線條動畫SVG動畫
- SVG <path> 元素A指令繪製弧線SVG
- SVG stroke-dasharray虛線邊框SVG
- SVG 實現複雜線條動畫SVG動畫
- AUTOCAD——直線命令
- canvas繪製直線Canvas
- 一根飛線的故事-SVG篇SVG
- SVG使用滑鼠點選繪製折線效果SVG
- LinearLayout線性佈局
- oracle baseline基線_awrOracle
- 修改ListView 分割線Seperator lineView
- echarts markLine參考線Echarts
- SVG <path> C 指令 三次貝塞爾曲線SVG
- SVG <path> Q指令 二次貝塞爾曲線SVG
- SVG導航下劃線游標跟隨效果SVG
- JavaScript WebGL 繪製一條直線JavaScriptWeb
- 計算兩豎直直線與橢圓圍成部分面積
- SVG <path>元素C指令三次貝塞爾曲線SVG
- SVG <path>元素Q指令二次貝塞爾曲線SVG
- 【SVG】SVG的奪命利器——pathSVG
- SVG入門—如何手寫SVGSVG
- SVG designer - boxy-svgSVG
- 【Openxml】將Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線XMLSVG
- 計算兩條直線的交點
- JavaScript點選兩點繪製直線JavaScript