svg pattern - test

HTML

<svg viewBox="0 0 400 200" style="position: absolute; left: 0px; top: 0px; width: 400px; height: 200px;background-color:black;">
	<defs>
   <pattern id="striped" patternUnits="userSpaceOnUse" height="10" width="10">
        <rect id="stripes" x="0" y="4" width="10" height="4" style="fill:#000000;" />
		</pattern>
	</defs>
  	<path stroke-width="3" transform ="scale(1)" id="shape" fill="url(#striped)" d="M50 0L100 50L50 100L0 50z"/>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape" x="120" y="0" transform="scale(1)"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape" x="240" y="0" transform="scale(1)"></use>
</svg>

JavaScript

var color = "red";
var s = document.getElementById("shape");
s.style.stroke = color;

//uncomment for solid shading
//s.style.fill = color;

// uncomment for open shading
//s.style.fill = "none";
//s.style.strokeWidth = "5";

var t = document.getElementById("stripes");
t.style.fill = color;