SVG 實作

$(document).ready(function () {

r1();

});

function r1()
{
  var rc = "";
  var x = 0 ;
  var y = 0 ;
     var c1 = "";
     var c2 = "";

     for( i = 0 ; i < 100 ; i++ )
     {

y = (i%6)*36 ;

z = Math.floor((Math.random() * 10) + 1)

if( z%3==0){c1 = "red"; c2="莊";}
if( z%3==1){c1 = "blue";c2="閒";}
if( z%3==2){c1 = "green";c2="和";}


rc +="<svg  id = 'svg1'  style='left: "+ x +"px; top:"+ y +"px; position: absolute ; z-index: 999;visibility:visible'>";
rc +="<circle cx='20' cy='20' r='18' stroke='green' stroke-width='0' fill="+ c1 +" />";
rc+="<text style='fill:white;'font-size='24' font-family='SimHei' x='9' y='28' width='0' height='0'>"+c2+"</text>";
rc+="</svg>";

if( (i+1)%6 == 0 )x+=36;
}

$('#roadcontent').append(rc);





<div id= "roadcontent"></div>


https://jsfiddle.net/c9rmzb8h/#