<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="450px" height="450px" viewbox="0 0 450 450" style="enable-background:new 0 0 450 450;" xml:space="preserve"> <style type="text/css"> .st0{fill:#ffffff;} .st1{fill:none;stroke:#000000;stroke-miterlimit:10;} </style> <rect id="1" x="299.8" y="300.5" class="st0" width="149.5" height="150.5"/> <rect id="2" x="150.2" y="300.5" class="st0" width="149.5" height="150.5"/> <rect id="3" y="300.5" class="st0" width="149.5" height="150.5"/> <rect id="4" x="299.8" y="150.5" class="st0" width="149.5" height="150.5"/> <rect id="5" x="150.2" y="150.5" class="st0" width="149.5" height="150.5"/> <rect id="6" y="150.5" class="st0" width="149.5" height="150.5"/> <rect id="7" x="299.8" class="st0" width="149.5" height="150.5"/> <rect id="8" x="150.2" class="st0" width="149.5" height="150.5"/> <rect id="9" class="st0" width="149.5" height="150.5"/> <line class="path" fill="none" stroke="#000000" x1="149.5" y1="0" x2="149.5" y2="450"/> <line class="path" fill="none" stroke="#000000" x1="299.5" y1="450" x2="299.5" y2="0"/> <line class="path" fill="none" stroke="#000000" x1="0" y1="150.5" x2="450" y2="150.5"/> <line class="path" fill="none" stroke="#000000" x1="450" y1="300.5" x2="0" y2="300.5"/> </svg> i have svg tic tac toe board. want load(run animation of line tags) after user enters number of players , player names. there way that? rect elements use target areas while playing game.
.path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; } @keyframes dash { { stroke-dashoffset: 0; } }
like perhaps i.e. set class on click?
function run() { var lines = document.getelementsbytagname("line"); (var = 0; < lines.length; i++) { lines[i].setattribute("class", "path"); } }line { stroke-dasharray: 1000; stroke-dashoffset: 1000; } .path { animation: dash 5s linear forwards; } @keyframes dash { { stroke-dashoffset: 0; } } <button onclick="run()">click me</button> <svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="450px" height="450px" viewbox="0 0 450 450" style="enable-background:new 0 0 450 450;" xml:space="preserve"> <style type="text/css"> .st0{fill:#ffffff;} .st1{fill:none;stroke:#000000;stroke-miterlimit:10;} </style> <rect id="1" x="299.8" y="300.5" class="st0" width="149.5" height="150.5"/> <rect id="2" x="150.2" y="300.5" class="st0" width="149.5" height="150.5"/> <rect id="3" y="300.5" class="st0" width="149.5" height="150.5"/> <rect id="4" x="299.8" y="150.5" class="st0" width="149.5" height="150.5"/> <rect id="5" x="150.2" y="150.5" class="st0" width="149.5" height="150.5"/> <rect id="6" y="150.5" class="st0" width="149.5" height="150.5"/> <rect id="7" x="299.8" class="st0" width="149.5" height="150.5"/> <rect id="8" x="150.2" class="st0" width="149.5" height="150.5"/> <rect id="9" class="st0" width="149.5" height="150.5"/> <line fill="none" stroke="#000000" x1="149.5" y1="0" x2="149.5" y2="450"/> <line fill="none" stroke="#000000" x1="299.5" y1="450" x2="299.5" y2="0"/> <line fill="none" stroke="#000000" x1="0" y1="150.5" x2="450" y2="150.5"/> <line fill="none" stroke="#000000" x1="450" y1="300.5" x2="0" y2="300.5"/> </svg>
Comments
Post a Comment