riot svg transform

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
<riot-map>

</riot-map>

<script type="riot/tag">
<riot-map>
	<svg
  	version="1.1" riot-viewBox="{viewBox}" > 

       <path 	each={ fig in this.figs } 
       				d={fig.path}  
    					riot-transform={fig.transform}
              fill="red"/>
  </svg>
  
  this.viewBox="0 0 1500 500";
  this.figs= [
			{ "transform":"translate(0,0)",
				"path": "M 50 50 L 100 50 L 100 100 L 50 100  z"},
			{ "transform":"translate(0,0)",
				"path": "M 150 50 L 200 50 L 200 100 L 150 100  z"}
     ]
  

</riot-map>
</script>

CSS

html,body,riot-map{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
}

path:hover{fill:blue}

JavaScript

riot.mount("riot-map");