javascript - 有没有办法在点击时运行 svg？

Question

<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>

我有这个 svg，它是一个井字棋盘。我希望它在用户输入玩家数量和玩家姓名后加载(运行行标签的动画)。有没有办法做到这一点？矩形元素是我在玩游戏时用来定位区域的元素。

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
} 

Answer 1

也许是这样，即在点击时设置类？

function run() {
  var lines = document.getElementsByTagName("line");
  for (var i = 0; i < lines.length; i++) {
    lines[i].setAttribute("class", "path");
  }
}

line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.path {
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    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>