<!DOCTYPE html> <html lang="ja"> <head> <style> .my-line { stroke: #000; stroke-width: 3; stroke-linecap: round; } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 30"> <line class="my-line" x1="10" y1="18" x2="300" y2="18" /> </svg> </body> </html> 上記のコードをブラウザで実行すると、以下の直線が表示されます。 この直線に stroke-dasharray を指定すると、破線になります。 stroke-dasharray: 10; を指定すると、破線の実線部分(黒い部分)、ギャップ