SVG繪製矩形缺角問題解決方案
有沒有發現使用<path>繪製一個矩形的時候會有缺角的問題。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> svg { border:1px solid red; } </style> </head> <body> <svg width="400" height="300"> <path d="M50,50 L250,50 L250,250 L50,250 L50,50 " fill="none" stroke="red" stroke-width="10" /> </svg> </body> </html>
有沒有發現矩形的左上角缺了一塊,解決這個問題的方法其實很簡單,只要關閉路徑即可。
程式碼修改如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> svg { border:1px solid red; } </style> </head> <body> <svg width="400" height="300"> <path d="M50,50 L250,50 L250,250 L50,250 L50,50 Z" fill="none" stroke="red" stroke-width="10" /> </svg> </body> </html>
只要在最後加上關閉路徑的命令Z即可,大小寫都是可以的。
相關文章
- SVG 繪製圓角矩形SVG
- canvas 繪製矩形缺角Canvas
- SVG <rect> 繪製矩形SVG
- canvas 繪製圓角矩形Canvas
- SVG拖動繪製矩形程式碼例項SVG
- 微信小程式 canvas圓角矩形的繪製微信小程式Canvas
- canvas繪製圓角矩形程式碼例項Canvas
- canvas 繪製矩形Canvas
- 原來 Canvas 也能直接繪製圓角矩形了Canvas
- SVG繪製1px直線模糊問題SVG
- canvas繪製矩形框Canvas
- SVG <text>繪製文字SVG
- SVG 繪製直線SVG
- canvas系列教程之繪製矩形Canvas
- SVG <circle> 繪製圓形SVG
- SVG繪製餅狀圖SVG
- JavaScript拖動滑鼠繪製矩形方框JavaScript
- html5中canvas繪製矩形HTMLCanvas
- iOS 繪製圓角iOS
- maven專案缺jar問題解決MavenJAR
- svg02——svg繪製基本圖形,瞭解常用的屬性SVG
- SVG <ellipse> 繪製橢圓SVG
- SVG矩形旋轉動畫SVG動畫
- SVG基礎知識 Adobe Illustrator繪製SVGSVG
- SVG <path> 元素A指令繪製弧線SVG
- SVG <polyline> 繪製折線SVG
- 跨域問題,解決方案 – CORS方案跨域CORS
- 跨域問題,解決方案 - CORS方案跨域CORS
- 木馬問題解決方案
- jive中文問題解決方案
- CAD繪製帶角度的矩形陣列陣列
- Opengl ES 3.0 on iOS--- HelloWord(繪製彩色矩形)iOS
- 蘋果手機下safari瀏覽器submit按鈕圓角問題解決方案蘋果瀏覽器MIT
- svg生成矩形效果程式碼SVG
- AntV G6 關於多邊繪製的解決方案
- SVG繪製直線簡單介紹SVG
- svg繪製半圓程式碼例項SVG
- HTML5 Canvas ( 矩形的繪製 ) rect, strokeRect, fillRectHTMLCanvas