改下哥尼斯堡網頁程式

ejsoon · 帖子由 **ejsoon** » 2026年 4月 17日 11:41

konigsberg20260417history793

當打開history，modal窗口將關閉。設#g12155背景為lightblue以使其可以點擊。

https://ejsoon.vip/wp-content/uploads/2 ... ry793.html

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 13:37

好像綠方的勝率會高一些。

代码：全选

<svg id="konigsberganimate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="480" viewBox="0 0 720 480" style="background: lightblue; height: 768px; width: 1366px;" opacity="0"><g class="appendarea"><circle cx="180.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="0"/><circle cx="360.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="1"/><circle cx="540.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="2"/><circle cx="90.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="3"/><circle cx="270.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="4"/><circle cx="450.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="5"/><circle cx="630.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="6"/><circle cx="180.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="7"/><circle cx="360.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="8"/><circle cx="540.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="9"/><path class="arrowbrg" d="M118,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 180,203.885)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 180,203.885" to="180 180,203.885" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="0 180,203.885" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M253,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 315,125.942)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 315,125.942" to="480 315,125.942" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 315,125.942" to="300 315,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 315,125.942" to="480 315,125.942" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 315,125.942" to="300 315,125.942" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="300 315,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M343,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 405,125.942)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 405,125.942" to="240 405,125.942" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 405,125.942" to="420 405,125.942" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="60 405,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M343,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 405,281.827)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 405,281.827" to="300 405,281.827" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 405,281.827" to="480 405,281.827" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 405,281.827" to="300 405,281.827" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="120 405,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M208,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 270,359.769)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 270,359.769" to="360 270,359.769" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 270,359.769" to="180 270,359.769" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 270,359.769" to="360 270,359.769" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 270,359.769" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M523,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 585,125.942)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 585,125.942" to="420 585,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 585,125.942" to="240 585,125.942" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 585,125.942" to="420 585,125.942" dur="1s" fill="freeze" begin="kam4.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 585,125.942" to="240 585,125.942" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="240 585,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M388,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 450,48)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 450,48" to="360 450,48" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 450,48" to="180 450,48" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 450,48" to="360 450,48" dur="1s" fill="freeze" begin="kam5.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 450,48" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M163,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 225,125.942)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 225,125.942" to="420 225,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 225,125.942" to="240 225,125.942" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="240 225,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M73,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 135,125.942)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 135,125.942" to="300 135,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 135,125.942" to="480 135,125.942" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="120 135,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M208,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 270,48)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 270,48" to="360 270,48" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 270,48" to="180 270,48" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 270,48" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M73,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 135,281.827)"><set attributeName="visibility" to="visible" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam3.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 135,281.827" to="240 135,281.827" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 135,281.827" to="420 135,281.827" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="60 135,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M163,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 225,281.827)"><set attributeName="visibility" to="visible" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam3.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 225,281.827" to="480 225,281.827" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="300 225,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M478,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 540,203.885)"><set attributeName="visibility" to="visible" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam3.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M298,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 360,203.885)"><set attributeName="visibility" to="visible" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M433,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 495,281.827)"><set attributeName="visibility" to="visible" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M523,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 585,281.827)"><set attributeName="visibility" to="visible" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M253,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 315,281.827)"><set attributeName="visibility" to="visible" begin="kap5.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap5.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam5.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M433,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 495,125.942)"><set attributeName="visibility" to="visible" begin="kap5.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap5.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam5.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M388,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 450,359.769)"><set attributeName="visibility" to="visible" begin="kap6.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap6.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam6.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path></g><g class="bottomarea"><circle cx="90.00" cy="203.88" r="24" fill="#77d" stroke="none" stroke-width="4"><set attributeName="stroke" id="kaj0" to="white" begin="kastart.end+1s"/><set attributeName="visibility" to="hidden" begin="kam0.begin"/><set attributeName="visibility" to="visible" begin="kam0.end"/><set attributeName="cx" to="180.00" begin="kam0.end"/><set attributeName="cy" to="359.77" begin="kam0.end"/><set id="kad0" attributeName="stroke" to="none" begin="kam0.end+1.2s"/><set attributeName="stroke" id="kaj2" to="white" begin="kad1.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam2.begin"/><set attributeName="visibility" to="visible" begin="kam2.end"/><set attributeName="cx" to="270.00" begin="kam2.end"/><set attributeName="cy" to="203.88" begin="kam2.end"/><set id="kad2" attributeName="stroke" to="none" begin="kam2.end+1.2s"/><set attributeName="stroke" id="kaj4" to="white" begin="kad3.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam4.begin"/><set attributeName="visibility" to="visible" begin="kam4.end"/><set attributeName="cx" to="540.00" begin="kam4.end"/><set attributeName="cy" to="48.00" begin="kam4.end"/><set id="kad4" attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="stroke" id="kaj6" to="white" begin="kad5.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam6.begin"/><set attributeName="visibility" to="visible" begin="kam6.end"/><set attributeName="cx" to="270.00" begin="kam6.end"/><set attributeName="cy" to="203.88" begin="kam6.end"/><set id="kad6" attributeName="stroke" to="none" begin="kam6.end+1.2s"/><set attributeName="cx" to="90.00" begin="kaend.end"/><set attributeName="cy" to="203.88" begin="kaend.end"/><set attributeName="stroke" to="none" begin="kaend.end"/></circle><circle cx="630.00" cy="203.88" r="24" fill="#3d3" stroke="none" stroke-width="4"><set attributeName="stroke" id="kaj1" to="white" begin="kad0.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam1.begin"/><set attributeName="visibility" to="visible" begin="kam1.end"/><set attributeName="cx" to="90.00" begin="kam1.end"/><set attributeName="cy" to="203.88" begin="kam1.end"/><set id="kad1" attributeName="stroke" to="none" begin="kam1.end+1.2s"/><set attributeName="stroke" id="kaj3" to="white" begin="kad2.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam3.begin"/><set attributeName="visibility" to="visible" begin="kam3.end"/><set attributeName="cx" to="360.00" begin="kam3.end"/><set attributeName="cy" to="359.77" begin="kam3.end"/><set id="kad3" attributeName="stroke" to="none" begin="kam3.end+1.2s"/><set attributeName="stroke" id="kaj5" to="white" begin="kad4.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam5.begin"/><set attributeName="visibility" to="visible" begin="kam5.end"/><set attributeName="cx" to="360.00" begin="kam5.end"/><set attributeName="cy" to="48.00" begin="kam5.end"/><set id="kad5" attributeName="stroke" to="none" begin="kam5.end+1.2s"/><set attributeName="stroke" id="kaj7" to="white" begin="kad6.begin+1s"/><set attributeName="cx" to="630.00" begin="kaend.end"/><set attributeName="cy" to="203.88" begin="kaend.end"/><set attributeName="stroke" to="none" begin="kaend.end"/></circle></g><g class="middlearea" visibility="hidden"><line class="redline" x1="360.00" y1="48.00" x2="450.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360.00" y1="48.00" x2="540.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360.00" y1="48.00" x2="180.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450.00" y1="203.88" x2="540.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450.00" y1="203.88" x2="540.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="180.00" y1="48.00" x2="90.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540.00" y1="359.77" x2="630.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540.00" y1="359.77" x2="360.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="90.00" y1="203.88" x2="180.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="630.00" y1="203.88" x2="450.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="630.00" y1="203.88" x2="540.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360.00" y1="359.77" x2="450.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360.00" y1="359.77" x2="270.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="180.00" y1="359.77" x2="360.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="90.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="180.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="180.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="450.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="360.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><set id="kad7" attributeName="visibility" to="visible" begin="kaj7.begin+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></g><path id="movingroute" class="route_tmp hide" d="M540,48 L 630,203.88457268119896 L 450,203.88457268119896 L 540,359.7691453623979 L 360,359.7691453623979 L 180,359.7691453623979 L 90,203.88457268119896 L 180,48 L 360,48 L 270,203.88457268119896 " fill="none" stroke="#333" stroke-linejoin="round" stroke-width="4" stroke-dasharray="12 7" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="d" id="kap0" to="M 90.00,203.88 L 270.00,203.88 L 360.00,48.00 L 450.00,203.88 L 360.00,359.77 L 180.00,359.77" begin="kaj0.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap0.begin" end="kap0.end"/><set attributeName="d" id="kap1" to="M 630.00,203.88 L 540.00,48.00 L 360.00,48.00 L 270.00,203.88 L 180.00,48.00 L 90.00,203.88" begin="kaj1.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap1.begin" end="kap1.end"/><set attributeName="d" id="kap2" to="M 180.00,359.77 L 360.00,359.77 L 450.00,203.88 L 360.00,48.00 L 180.00,48.00 L 270.00,203.88" begin="kaj2.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap2.begin" end="kap2.end"/><set attributeName="d" id="kap3" to="M 90.00,203.88 L 180.00,359.77 L 270.00,203.88 L 360.00,48.00 L 540.00,48.00 L 630.00,203.88 L 450.00,203.88 L 360.00,359.77" begin="kaj3.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap3.begin" end="kap3.end"/><set attributeName="d" id="kap4" to="M 270.00,203.88 L 450.00,203.88 L 540.00,359.77 L 630.00,203.88 L 540.00,48.00" begin="kaj4.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap4.begin" end="kap4.end"/><set attributeName="d" id="kap5" to="M 360.00,359.77 L 270.00,203.88 L 450.00,203.88 L 540.00,48.00 L 360.00,48.00" begin="kaj5.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap5.begin" end="kap5.end"/><set attributeName="d" id="kap6" to="M 540.00,48.00 L 630.00,203.88 L 450.00,203.88 L 540.00,359.77 L 360.00,359.77 L 180.00,359.77 L 90.00,203.88 L 180.00,48.00 L 360.00,48.00 L 270.00,203.88" begin="kaj6.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap6.begin" end="kap6.end"/></path><g class="toparea"><circle cx="0" cy="0" r="24" fill="#77d" stroke="lightyellow" stroke-width="4" stroke-dasharray="5 5" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="visibility" to="visible" begin="kam0.begin"/><animateMotion id="kam0" begin="kap0.end" dur="5s" fill="freeze" path="M 90.00,203.88 L 270.00,203.88 L 360.00,48.00 L 450.00,203.88 L 360.00,359.77 L 180.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam0.end"/><set attributeName="visibility" to="visible" begin="kam2.begin"/><animateMotion id="kam2" begin="kap2.end" dur="5s" fill="freeze" path="M 180.00,359.77 L 360.00,359.77 L 450.00,203.88 L 360.00,48.00 L 180.00,48.00 L 270.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam2.end"/><set attributeName="visibility" to="visible" begin="kam4.begin"/><animateMotion id="kam4" begin="kap4.end" dur="4s" fill="freeze" path="M 270.00,203.88 L 450.00,203.88 L 540.00,359.77 L 630.00,203.88 L 540.00,48.00"/><set attributeName="visibility" to="hidden" begin="kam4.end"/><set attributeName="visibility" to="visible" begin="kam6.begin"/><animateMotion id="kam6" begin="kap6.end" dur="9s" fill="freeze" path="M 540.00,48.00 L 630.00,203.88 L 450.00,203.88 L 540.00,359.77 L 360.00,359.77 L 180.00,359.77 L 90.00,203.88 L 180.00,48.00 L 360.00,48.00 L 270.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam6.end"/></circle><circle cx="0" cy="0" r="24" fill="#3d3" stroke="lightyellow" stroke-width="4" stroke-dasharray="5 5" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="visibility" to="visible" begin="kam1.begin"/><animateMotion id="kam1" begin="kap1.end" dur="5s" fill="freeze" path="M 630.00,203.88 L 540.00,48.00 L 360.00,48.00 L 270.00,203.88 L 180.00,48.00 L 90.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam1.end"/><set attributeName="visibility" to="visible" begin="kam3.begin"/><animateMotion id="kam3" begin="kap3.end" dur="7s" fill="freeze" path="M 90.00,203.88 L 180.00,359.77 L 270.00,203.88 L 360.00,48.00 L 540.00,48.00 L 630.00,203.88 L 450.00,203.88 L 360.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam3.end"/><set attributeName="visibility" to="visible" begin="kam5.begin"/><animateMotion id="kam5" begin="kap5.end" dur="4s" fill="freeze" path="M 360.00,359.77 L 270.00,203.88 L 450.00,203.88 L 540.00,48.00 L 360.00,48.00"/><set attributeName="visibility" to="hidden" begin="kam5.end"/></circle></g><animate id="kastart" begin="0s;kaend.end" attributeName="opacity" values="0;0;1" fill="freeze" dur="2s"/><animate id="kaend" begin="kad7.begin" attributeName="opacity" values="1;1;1;1;0" fill="freeze" dur="4s"/></svg>

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 13:44

藍方終於獲勝：

代码：全选

<svg id="konigsberganimate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="480" viewBox="0 0 720 480" style="background: lightblue; height: 100%; width: 100%;" opacity="0"><g class="appendarea"><circle cx="180.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="0"/><circle cx="360.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="1"/><circle cx="540.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="2"/><circle cx="90.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="3"/><circle cx="270.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="4"/><circle cx="450.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="5"/><circle cx="630.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="6"/><circle cx="180.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="7"/><circle cx="360.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="8"/><circle cx="540.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="9"/><path class="arrowbrg" d="M73,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 135,281.827)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 135,281.827" to="240 135,281.827" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 135,281.827" to="420 135,281.827" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 135,281.827" to="240 135,281.827" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="60 135,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M208,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 270,359.769)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 270,359.769" to="180 270,359.769" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 270,359.769" to="360 270,359.769" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="0 270,359.769" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M253,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 315,281.827)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 315,281.827" to="420 315,281.827" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 315,281.827" to="240 315,281.827" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="240 315,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M253,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 315,125.942)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 315,125.942" to="480 315,125.942" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="300 315,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M343,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 405,125.942)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 405,125.942" to="240 405,125.942" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 405,125.942" to="420 405,125.942" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 405,125.942" to="240 405,125.942" dur="1s" fill="freeze" begin="kam4.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="60 405,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M523,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 585,125.942)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 585,125.942" to="420 585,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 585,125.942" to="240 585,125.942" dur="1s" fill="freeze" begin="kam5.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 585,125.942" to="420 585,125.942" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="240 585,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M433,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 495,125.942)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 495,125.942" to="300 495,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 495,125.942" to="480 495,125.942" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 495,125.942" to="300 495,125.942" dur="1s" fill="freeze" begin="kam8.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="120 495,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M343,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 405,281.827)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 405,281.827" to="300 405,281.827" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 405,281.827" to="480 405,281.827" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 405,281.827" to="300 405,281.827" dur="1s" fill="freeze" begin="kam4.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="120 405,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M388,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 450,48)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 450,48" to="360 450,48" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 450,48" to="180 450,48" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 450,48" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M208,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 270,48)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 270,48" to="360 270,48" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 270,48" to="180 270,48" dur="1s" fill="freeze" begin="kam4.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 270,48" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M163,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 225,125.942)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 225,125.942" to="240 225,125.942" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 225,125.942" to="420 225,125.942" dur="1s" fill="freeze" begin="kam4.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 225,125.942" to="240 225,125.942" dur="1s" fill="freeze" begin="kam9.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="60 225,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M118,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 180,203.885)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 180,203.885" to="360 180,203.885" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 180,203.885" to="180 180,203.885" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 180,203.885" to="360 180,203.885" dur="1s" fill="freeze" begin="kam7.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 180,203.885" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M163,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 225,281.827)"><set attributeName="visibility" to="visible" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M388,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 450,359.769)"><set attributeName="visibility" to="visible" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M433,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 495,281.827)"><set attributeName="visibility" to="visible" begin="kap6.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap6.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam6.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M478,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 540,203.885)"><set attributeName="visibility" to="visible" begin="kap6.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap6.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam6.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M523,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 585,281.827)"><set attributeName="visibility" to="visible" begin="kap7.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap7.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam7.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M298,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 360,203.885)"><set attributeName="visibility" to="visible" begin="kap7.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap7.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam7.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M73,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 135,125.942)"><set attributeName="visibility" to="visible" begin="kap9.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap9.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam9.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path></g><g class="bottomarea"><circle cx="90.00" cy="203.88" r="24" fill="#77d" stroke="none" stroke-width="4"><set attributeName="stroke" id="kaj0" to="white" begin="kastart.end+1s"/><set attributeName="visibility" to="hidden" begin="kam0.begin"/><set attributeName="visibility" to="visible" begin="kam0.end"/><set attributeName="cx" to="450.00" begin="kam0.end"/><set attributeName="cy" to="203.88" begin="kam0.end"/><set id="kad0" attributeName="stroke" to="none" begin="kam0.end+1.2s"/><set attributeName="stroke" id="kaj2" to="white" begin="kad1.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam2.begin"/><set attributeName="visibility" to="visible" begin="kam2.end"/><set attributeName="cx" to="180.00" begin="kam2.end"/><set attributeName="cy" to="359.77" begin="kam2.end"/><set id="kad2" attributeName="stroke" to="none" begin="kam2.end+1.2s"/><set attributeName="stroke" id="kaj4" to="white" begin="kad3.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam4.begin"/><set attributeName="visibility" to="visible" begin="kam4.end"/><set attributeName="cx" to="540.00" begin="kam4.end"/><set attributeName="cy" to="359.77" begin="kam4.end"/><set id="kad4" attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="stroke" id="kaj6" to="white" begin="kad5.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam6.begin"/><set attributeName="visibility" to="visible" begin="kam6.end"/><set attributeName="cx" to="540.00" begin="kam6.end"/><set attributeName="cy" to="48.00" begin="kam6.end"/><set id="kad6" attributeName="stroke" to="none" begin="kam6.end+1.2s"/><set attributeName="stroke" id="kaj8" to="white" begin="kad7.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam8.begin"/><set attributeName="visibility" to="visible" begin="kam8.end"/><set attributeName="cx" to="450.00" begin="kam8.end"/><set attributeName="cy" to="203.88" begin="kam8.end"/><set id="kad8" attributeName="stroke" to="none" begin="kam8.end+1.2s"/><set attributeName="stroke" id="kaj10" to="white" begin="kad9.begin+1s"/><set attributeName="cx" to="90.00" begin="kaend.end"/><set attributeName="cy" to="203.88" begin="kaend.end"/><set attributeName="stroke" to="none" begin="kaend.end"/></circle><circle cx="630.00" cy="203.88" r="24" fill="#3d3" stroke="none" stroke-width="4"><set attributeName="stroke" id="kaj1" to="white" begin="kad0.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam1.begin"/><set attributeName="visibility" to="visible" begin="kam1.end"/><set attributeName="cx" to="90.00" begin="kam1.end"/><set attributeName="cy" to="203.88" begin="kam1.end"/><set id="kad1" attributeName="stroke" to="none" begin="kam1.end+1.2s"/><set attributeName="stroke" id="kaj3" to="white" begin="kad2.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam3.begin"/><set attributeName="visibility" to="visible" begin="kam3.end"/><set attributeName="cx" to="540.00" begin="kam3.end"/><set attributeName="cy" to="48.00" begin="kam3.end"/><set id="kad3" attributeName="stroke" to="none" begin="kam3.end+1.2s"/><set attributeName="stroke" id="kaj5" to="white" begin="kad4.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam5.begin"/><set attributeName="visibility" to="visible" begin="kam5.end"/><set attributeName="cx" to="630.00" begin="kam5.end"/><set attributeName="cy" to="203.88" begin="kam5.end"/><set id="kad5" attributeName="stroke" to="none" begin="kam5.end+1.2s"/><set attributeName="stroke" id="kaj7" to="white" begin="kad6.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam7.begin"/><set attributeName="visibility" to="visible" begin="kam7.end"/><set attributeName="cx" to="90.00" begin="kam7.end"/><set attributeName="cy" to="203.88" begin="kam7.end"/><set id="kad7" attributeName="stroke" to="none" begin="kam7.end+1.2s"/><set attributeName="stroke" id="kaj9" to="white" begin="kad8.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam9.begin"/><set attributeName="visibility" to="visible" begin="kam9.end"/><set attributeName="cx" to="270.00" begin="kam9.end"/><set attributeName="cy" to="203.88" begin="kam9.end"/><set id="kad9" attributeName="stroke" to="none" begin="kam9.end+1.2s"/><set attributeName="cx" to="630.00" begin="kaend.end"/><set attributeName="cy" to="203.88" begin="kaend.end"/><set attributeName="stroke" to="none" begin="kaend.end"/></circle></g><g class="middlearea" visibility="hidden"><line class="redline" x1="450.00" y1="203.88" x2="360.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450.00" y1="203.88" x2="630.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450.00" y1="203.88" x2="270.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450.00" y1="203.88" x2="540.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360.00" y1="48.00" x2="270.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360.00" y1="48.00" x2="180.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="630.00" y1="203.88" x2="540.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="180.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540.00" y1="48.00" x2="360.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540.00" y1="48.00" x2="630.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540.00" y1="359.77" x2="450.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><set id="kad10" attributeName="visibility" to="visible" begin="kaj10.begin+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></g><path id="movingroute" class="route_tmp hide" d="M90,203.88457268119896 L 180,48 L 270,203.88457268119896 " fill="none" stroke="#333" stroke-linejoin="round" stroke-width="4" stroke-dasharray="12 7" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="d" id="kap0" to="M 90.00,203.88 L 180.00,359.77 L 360.00,359.77 L 270.00,203.88 L 360.00,48.00 L 450.00,203.88" begin="kaj0.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap0.begin" end="kap0.end"/><set attributeName="d" id="kap1" to="M 630.00,203.88 L 540.00,48.00 L 450.00,203.88 L 360.00,359.77 L 180.00,359.77 L 90.00,203.88" begin="kaj1.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap1.begin" end="kap1.end"/><set attributeName="d" id="kap2" to="M 450.00,203.88 L 540.00,48.00 L 360.00,48.00 L 180.00,48.00 L 270.00,203.88 L 90.00,203.88 L 180.00,359.77" begin="kaj2.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap2.begin" end="kap2.end"/><set attributeName="d" id="kap3" to="M 90.00,203.88 L 270.00,203.88 L 360.00,359.77 L 450.00,203.88 L 360.00,48.00 L 540.00,48.00" begin="kaj3.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap3.begin" end="kap3.end"/><set attributeName="d" id="kap4" to="M 180.00,359.77 L 270.00,203.88 L 180.00,48.00 L 360.00,48.00 L 450.00,203.88 L 360.00,359.77 L 540.00,359.77" begin="kaj4.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap4.begin" end="kap4.end"/><set attributeName="d" id="kap5" to="M 540.00,48.00 L 630.00,203.88" begin="kaj5.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap5.begin" end="kap5.end"/><set attributeName="d" id="kap6" to="M 540.00,359.77 L 450.00,203.88 L 630.00,203.88 L 540.00,48.00" begin="kaj6.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap6.begin" end="kap6.end"/><set attributeName="d" id="kap7" to="M 630.00,203.88 L 540.00,359.77 L 450.00,203.88 L 270.00,203.88 L 90.00,203.88" begin="kaj7.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap7.begin" end="kap7.end"/><set attributeName="d" id="kap8" to="M 540.00,48.00 L 450.00,203.88" begin="kaj8.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap8.begin" end="kap8.end"/><set attributeName="d" id="kap9" to="M 90.00,203.88 L 180.00,48.00 L 270.00,203.88" begin="kaj9.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap9.begin" end="kap9.end"/></path><g class="toparea"><circle cx="0" cy="0" r="24" fill="#77d" stroke="lightyellow" stroke-width="4" stroke-dasharray="5 5" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="visibility" to="visible" begin="kam0.begin"/><animateMotion id="kam0" begin="kap0.end" dur="5s" fill="freeze" path="M 90.00,203.88 L 180.00,359.77 L 360.00,359.77 L 270.00,203.88 L 360.00,48.00 L 450.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam0.end"/><set attributeName="visibility" to="visible" begin="kam2.begin"/><animateMotion id="kam2" begin="kap2.end" dur="6s" fill="freeze" path="M 450.00,203.88 L 540.00,48.00 L 360.00,48.00 L 180.00,48.00 L 270.00,203.88 L 90.00,203.88 L 180.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam2.end"/><set attributeName="visibility" to="visible" begin="kam4.begin"/><animateMotion id="kam4" begin="kap4.end" dur="6s" fill="freeze" path="M 180.00,359.77 L 270.00,203.88 L 180.00,48.00 L 360.00,48.00 L 450.00,203.88 L 360.00,359.77 L 540.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam4.end"/><set attributeName="visibility" to="visible" begin="kam6.begin"/><animateMotion id="kam6" begin="kap6.end" dur="3s" fill="freeze" path="M 540.00,359.77 L 450.00,203.88 L 630.00,203.88 L 540.00,48.00"/><set attributeName="visibility" to="hidden" begin="kam6.end"/><set attributeName="visibility" to="visible" begin="kam8.begin"/><animateMotion id="kam8" begin="kap8.end" dur="1s" fill="freeze" path="M 540.00,48.00 L 450.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam8.end"/></circle><circle cx="0" cy="0" r="24" fill="#3d3" stroke="lightyellow" stroke-width="4" stroke-dasharray="5 5" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="visibility" to="visible" begin="kam1.begin"/><animateMotion id="kam1" begin="kap1.end" dur="5s" fill="freeze" path="M 630.00,203.88 L 540.00,48.00 L 450.00,203.88 L 360.00,359.77 L 180.00,359.77 L 90.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam1.end"/><set attributeName="visibility" to="visible" begin="kam3.begin"/><animateMotion id="kam3" begin="kap3.end" dur="5s" fill="freeze" path="M 90.00,203.88 L 270.00,203.88 L 360.00,359.77 L 450.00,203.88 L 360.00,48.00 L 540.00,48.00"/><set attributeName="visibility" to="hidden" begin="kam3.end"/><set attributeName="visibility" to="visible" begin="kam5.begin"/><animateMotion id="kam5" begin="kap5.end" dur="1s" fill="freeze" path="M 540.00,48.00 L 630.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam5.end"/><set attributeName="visibility" to="visible" begin="kam7.begin"/><animateMotion id="kam7" begin="kap7.end" dur="4s" fill="freeze" path="M 630.00,203.88 L 540.00,359.77 L 450.00,203.88 L 270.00,203.88 L 90.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam7.end"/><set attributeName="visibility" to="visible" begin="kam9.begin"/><animateMotion id="kam9" begin="kap9.end" dur="2s" fill="freeze" path="M 90.00,203.88 L 180.00,48.00 L 270.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam9.end"/></circle></g><animate id="kastart" begin="0s;kaend.end" attributeName="opacity" values="0;0;1" fill="freeze" dur="2s"/><animate id="kaend" begin="kad10.begin" attributeName="opacity" values="1;1;1;1;0" fill="freeze" dur="4s"/></svg>

ejsoon · 帖子由 **ejsoon** » 2026年 4月 18日 15:33

konigsberg20260418icons794

改icons的width和height，max-width=36。

https://ejsoon.vip/wp-content/uploads/2 ... ns794.html

ejsoon · 帖子由 **ejsoon** » 2026年 4月 20日 01:43

為何導出會存在「 height: 414px; width: 886px;」？

ejsoon · 帖子由 **ejsoon** » 2026年 4月 20日 07:47

konigsberg20260420icons795

解決導出svg存在style-width和height的問題。

https://ejsoon.vip/wp-content/uploads/2 ... ns795.html

ejsoon · 帖子由 **ejsoon** » 2026年 4月 23日 12:35

哥尼斯堡，輸給困難等級：

代码：全选

<svg id="konigsberganimate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="480" viewBox="0 0 720 480" style="background: lightblue;" opacity="0"><g class="appendarea"><circle cx="180.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="0"/><circle cx="360.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="1"/><circle cx="540.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="2"/><circle cx="90.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="3"/><circle cx="270.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="4"/><circle cx="450.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="5"/><circle cx="630.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="6"/><circle cx="180.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="7"/><circle cx="360.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="8"/><circle cx="540.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="9"/><path class="arrowbrg" d="M118,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 180,203.885)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 180,203.885" to="180 180,203.885" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 180,203.885" to="360 180,203.885" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 180,203.885" to="180 180,203.885" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="0 180,203.885" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M253,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 315,125.942)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 315,125.942" to="480 315,125.942" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="300 315,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M343,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 405,125.942)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 405,125.942" to="240 405,125.942" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="60 405,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M343,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 405,281.827)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 405,281.827" to="300 405,281.827" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 405,281.827" to="480 405,281.827" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="120 405,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M388,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 450,359.769)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 450,359.769" to="180 450,359.769" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 450,359.769" to="360 450,359.769" dur="1s" fill="freeze" begin="kam5.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 450,359.769" to="180 450,359.769" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="0 450,359.769" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M523,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 585,125.942)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 585,125.942" to="420 585,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="240 585,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M433,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 495,125.942)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 495,125.942" to="300 495,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 495,125.942" to="480 495,125.942" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="120 495,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M298,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 360,203.885)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 360,203.885" to="360 360,203.885" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 360,203.885" to="180 360,203.885" dur="1s" fill="freeze" begin="kam4.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 360,203.885" to="360 360,203.885" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 360,203.885" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M523,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 585,281.827)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 585,281.827" to="480 585,281.827" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 585,281.827" to="300 585,281.827" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 585,281.827" to="480 585,281.827" dur="1s" fill="freeze" begin="kam4.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="300 585,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M478,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 540,203.885)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 540,203.885" to="360 540,203.885" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 540,203.885" to="180 540,203.885" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 540,203.885" to="360 540,203.885" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 540,203.885" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M388,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 450,48)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 450,48" to="360 450,48" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 450,48" to="180 450,48" dur="1s" fill="freeze" begin="kam5.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 450,48" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M208,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 270,48)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 270,48" to="360 270,48" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 270,48" to="180 270,48" dur="1s" fill="freeze" begin="kam5.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 270,48" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M73,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 135,125.942)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M73,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 135,281.827)"><set attributeName="visibility" to="visible" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam3.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M208,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 270,359.769)"><set attributeName="visibility" to="visible" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam3.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M433,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 495,281.827)"><set attributeName="visibility" to="visible" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M253,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 315,281.827)"><set attributeName="visibility" to="visible" begin="kap5.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap5.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam5.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M163,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 225,125.942)"><set attributeName="visibility" to="visible" begin="kap5.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap5.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam5.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M163,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 225,281.827)"><set attributeName="visibility" to="visible" begin="kap6.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap6.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam6.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path></g><g class="bottomarea"><circle cx="90.00" cy="203.88" r="24" fill="#77d" stroke="none" stroke-width="4"><set attributeName="stroke" id="kaj0" to="white" begin="kastart.end+1s"/><set attributeName="visibility" to="hidden" begin="kam0.begin"/><set attributeName="visibility" to="visible" begin="kam0.end"/><set attributeName="cx" to="540.00" begin="kam0.end"/><set attributeName="cy" to="359.77" begin="kam0.end"/><set id="kad0" attributeName="stroke" to="none" begin="kam0.end+1.2s"/><set attributeName="stroke" id="kaj2" to="white" begin="kad1.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam2.begin"/><set attributeName="visibility" to="visible" begin="kam2.end"/><set attributeName="cx" to="270.00" begin="kam2.end"/><set attributeName="cy" to="203.88" begin="kam2.end"/><set id="kad2" attributeName="stroke" to="none" begin="kam2.end+1.2s"/><set attributeName="stroke" id="kaj4" to="white" begin="kad3.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam4.begin"/><set attributeName="visibility" to="visible" begin="kam4.end"/><set attributeName="cx" to="630.00" begin="kam4.end"/><set attributeName="cy" to="203.88" begin="kam4.end"/><set id="kad4" attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="stroke" id="kaj6" to="white" begin="kad5.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam6.begin"/><set attributeName="visibility" to="visible" begin="kam6.end"/><set attributeName="cx" to="540.00" begin="kam6.end"/><set attributeName="cy" to="359.77" begin="kam6.end"/><set id="kad6" attributeName="stroke" to="none" begin="kam6.end+1.2s"/><set attributeName="cx" to="90.00" begin="kaend.end"/><set attributeName="cy" to="203.88" begin="kaend.end"/><set attributeName="stroke" to="none" begin="kaend.end"/></circle><circle cx="630.00" cy="203.88" r="24" fill="#3d3" stroke="none" stroke-width="4"><set attributeName="stroke" id="kaj1" to="white" begin="kad0.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam1.begin"/><set attributeName="visibility" to="visible" begin="kam1.end"/><set attributeName="cx" to="90.00" begin="kam1.end"/><set attributeName="cy" to="203.88" begin="kam1.end"/><set id="kad1" attributeName="stroke" to="none" begin="kam1.end+1.2s"/><set attributeName="stroke" id="kaj3" to="white" begin="kad2.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam3.begin"/><set attributeName="visibility" to="visible" begin="kam3.end"/><set attributeName="cx" to="540.00" begin="kam3.end"/><set attributeName="cy" to="359.77" begin="kam3.end"/><set id="kad3" attributeName="stroke" to="none" begin="kam3.end+1.2s"/><set attributeName="stroke" id="kaj5" to="white" begin="kad4.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam5.begin"/><set attributeName="visibility" to="visible" begin="kam5.end"/><set attributeName="cx" to="540.00" begin="kam5.end"/><set attributeName="cy" to="48.00" begin="kam5.end"/><set id="kad5" attributeName="stroke" to="none" begin="kam5.end+1.2s"/><set attributeName="stroke" id="kaj7" to="white" begin="kad6.begin+1s"/><set attributeName="cx" to="630.00" begin="kaend.end"/><set attributeName="cy" to="203.88" begin="kaend.end"/><set attributeName="stroke" to="none" begin="kaend.end"/></circle></g><g class="middlearea" visibility="hidden"><line class="redline" x1="540.00" y1="48.00" x2="630.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540.00" y1="48.00" x2="450.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540.00" y1="48.00" x2="360.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="630.00" y1="203.88" x2="540.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450.00" y1="203.88" x2="360.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450.00" y1="203.88" x2="360.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450.00" y1="203.88" x2="540.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="450.00" y1="203.88" x2="630.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360.00" y1="48.00" x2="270.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360.00" y1="48.00" x2="180.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="540.00" y1="359.77" x2="360.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="360.00" y1="359.77" x2="270.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="90.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="180.00" y2="48.00" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="180.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="270.00" y1="203.88" x2="450.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="180.00" y1="48.00" x2="90.00" y2="203.88" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="90.00" y1="203.88" x2="180.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><line class="redline" x1="180.00" y1="359.77" x2="360.00" y2="359.77" stroke="#e77" stroke-width="7" stroke-linecap="round"/><set id="kad7" attributeName="visibility" to="visible" begin="kaj7.begin+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></g><path id="movingroute" class="route_tmp hide" d="M630,203.88457268119896 L 450,203.88457268119896 L 270,203.88457268119896 L 180,359.7691453623979 L 360,359.7691453623979 L 540,359.7691453623979 " fill="none" stroke="#333" stroke-linejoin="round" stroke-width="4" stroke-dasharray="12 7" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="d" id="kap0" to="M 90.00,203.88 L 270.00,203.88 L 360.00,48.00 L 450.00,203.88 L 360.00,359.77 L 540.00,359.77" begin="kaj0.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap0.begin" end="kap0.end"/><set attributeName="d" id="kap1" to="M 630.00,203.88 L 540.00,48.00 L 450.00,203.88 L 270.00,203.88 L 90.00,203.88" begin="kaj1.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap1.begin" end="kap1.end"/><set attributeName="d" id="kap2" to="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 540.00,48.00 L 360.00,48.00 L 180.00,48.00 L 90.00,203.88 L 270.00,203.88" begin="kaj2.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap2.begin" end="kap2.end"/><set attributeName="d" id="kap3" to="M 90.00,203.88 L 180.00,359.77 L 360.00,359.77 L 450.00,203.88 L 630.00,203.88 L 540.00,359.77" begin="kaj3.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap3.begin" end="kap3.end"/><set attributeName="d" id="kap4" to="M 270.00,203.88 L 450.00,203.88 L 540.00,359.77 L 630.00,203.88" begin="kaj4.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap4.begin" end="kap4.end"/><set attributeName="d" id="kap5" to="M 540.00,359.77 L 360.00,359.77 L 270.00,203.88 L 180.00,48.00 L 360.00,48.00 L 540.00,48.00" begin="kaj5.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap5.begin" end="kap5.end"/><set attributeName="d" id="kap6" to="M 630.00,203.88 L 450.00,203.88 L 270.00,203.88 L 180.00,359.77 L 360.00,359.77 L 540.00,359.77" begin="kaj6.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap6.begin" end="kap6.end"/></path><g class="toparea"><circle cx="0" cy="0" r="24" fill="#77d" stroke="lightyellow" stroke-width="4" stroke-dasharray="5 5" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="visibility" to="visible" begin="kam0.begin"/><animateMotion id="kam0" begin="kap0.end" dur="5s" fill="freeze" path="M 90.00,203.88 L 270.00,203.88 L 360.00,48.00 L 450.00,203.88 L 360.00,359.77 L 540.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam0.end"/><set attributeName="visibility" to="visible" begin="kam2.begin"/><animateMotion id="kam2" begin="kap2.end" dur="7s" fill="freeze" path="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 540.00,48.00 L 360.00,48.00 L 180.00,48.00 L 90.00,203.88 L 270.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam2.end"/><set attributeName="visibility" to="visible" begin="kam4.begin"/><animateMotion id="kam4" begin="kap4.end" dur="3s" fill="freeze" path="M 270.00,203.88 L 450.00,203.88 L 540.00,359.77 L 630.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam4.end"/><set attributeName="visibility" to="visible" begin="kam6.begin"/><animateMotion id="kam6" begin="kap6.end" dur="5s" fill="freeze" path="M 630.00,203.88 L 450.00,203.88 L 270.00,203.88 L 180.00,359.77 L 360.00,359.77 L 540.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam6.end"/></circle><circle cx="0" cy="0" r="24" fill="#3d3" stroke="lightyellow" stroke-width="4" stroke-dasharray="5 5" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="visibility" to="visible" begin="kam1.begin"/><animateMotion id="kam1" begin="kap1.end" dur="4s" fill="freeze" path="M 630.00,203.88 L 540.00,48.00 L 450.00,203.88 L 270.00,203.88 L 90.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam1.end"/><set attributeName="visibility" to="visible" begin="kam3.begin"/><animateMotion id="kam3" begin="kap3.end" dur="5s" fill="freeze" path="M 90.00,203.88 L 180.00,359.77 L 360.00,359.77 L 450.00,203.88 L 630.00,203.88 L 540.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam3.end"/><set attributeName="visibility" to="visible" begin="kam5.begin"/><animateMotion id="kam5" begin="kap5.end" dur="5s" fill="freeze" path="M 540.00,359.77 L 360.00,359.77 L 270.00,203.88 L 180.00,48.00 L 360.00,48.00 L 540.00,48.00"/><set attributeName="visibility" to="hidden" begin="kam5.end"/></circle></g><animate id="kastart" begin="0s;kaend.end" attributeName="opacity" values="0;0;1" fill="freeze" dur="2s"/><animate id="kaend" begin="kad7.begin" attributeName="opacity" values="1;1;1;1;0" fill="freeze" dur="4s"/></svg>

ejsoon · 帖子由 **ejsoon** » 2026年 4月 23日 12:36

正著可以和棋：

代码：全选

<svg id="konigsberganimate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="480" viewBox="0 0 720 480" style="background: lightblue;" opacity="0"><g class="appendarea"><circle cx="180.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="0"/><circle cx="360.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="1"/><circle cx="540.00" cy="48.00" r="24" fill="#fff" stroke="#333" stroke-width="2" i="2"/><circle cx="90.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="3"/><circle cx="270.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="4"/><circle cx="450.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="5"/><circle cx="630.00" cy="203.88" r="24" fill="#fff" stroke="#333" stroke-width="2" i="6"/><circle cx="180.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="7"/><circle cx="360.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="8"/><circle cx="540.00" cy="359.77" r="24" fill="#fff" stroke="#333" stroke-width="2" i="9"/><path class="arrowbrg" d="M118,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 180,203.885)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 180,203.885" to="180 180,203.885" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 180,203.885" to="360 180,203.885" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 180,203.885" to="180 180,203.885" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="0 180,203.885" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M253,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 315,125.942)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 315,125.942" to="480 315,125.942" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 315,125.942" to="300 315,125.942" dur="1s" fill="freeze" begin="kam5.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 315,125.942" to="480 315,125.942" dur="1s" fill="freeze" begin="kam7.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 315,125.942" to="300 315,125.942" dur="1s" fill="freeze" begin="kam8.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="300 315,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M343,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 405,125.942)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 405,125.942" to="240 405,125.942" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 405,125.942" to="420 405,125.942" dur="1s" fill="freeze" begin="kam5.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="60 405,125.942" to="240 405,125.942" dur="1s" fill="freeze" begin="kam7.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 405,125.942" to="420 405,125.942" dur="1s" fill="freeze" begin="kam8.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="60 405,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M343,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 405,281.827)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 405,281.827" to="300 405,281.827" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 405,281.827" to="480 405,281.827" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="120 405,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M388,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 450,359.769)"><set attributeName="visibility" to="visible" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap0.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam0.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 450,359.769" to="180 450,359.769" dur="1s" fill="freeze" begin="kam0.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="0 450,359.769" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M523,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 585,125.942)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="240 585,125.942" to="420 585,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="240 585,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M433,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 495,125.942)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 495,125.942" to="300 495,125.942" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 495,125.942" to="480 495,125.942" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 495,125.942" to="300 495,125.942" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 495,125.942" to="480 495,125.942" dur="1s" fill="freeze" begin="kam7.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 495,125.942" to="300 495,125.942" dur="1s" fill="freeze" begin="kam9.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 495,125.942" to="480 495,125.942" dur="1s" fill="freeze" begin="kam10.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="120 495,125.942" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M298,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 360,203.885)"><set attributeName="visibility" to="visible" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap1.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam1.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 360,203.885" to="360 360,203.885" dur="1s" fill="freeze" begin="kam1.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 360,203.885" to="180 360,203.885" dur="1s" fill="freeze" begin="kam10.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 360,203.885" to="360 360,203.885" dur="1s" fill="freeze" begin="kam11.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 360,203.885" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M523,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(300 585,281.827)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 585,281.827" to="480 585,281.827" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 585,281.827" to="300 585,281.827" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 585,281.827" to="480 585,281.827" dur="1s" fill="freeze" begin="kam5.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 585,281.827" to="300 585,281.827" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 585,281.827" to="480 585,281.827" dur="1s" fill="freeze" begin="kam8.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="120 585,281.827" to="300 585,281.827" dur="1s" fill="freeze" begin="kam9.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="300 585,281.827" to="480 585,281.827" dur="1s" fill="freeze" begin="kam11.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="300 585,281.827" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M478,203.88457268119896 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 540,203.885)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 540,203.885" to="360 540,203.885" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 540,203.885" to="180 540,203.885" dur="1s" fill="freeze" begin="kam3.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 540,203.885" to="360 540,203.885" dur="1s" fill="freeze" begin="kam5.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 540,203.885" to="180 540,203.885" dur="1s" fill="freeze" begin="kam6.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 540,203.885" to="360 540,203.885" dur="1s" fill="freeze" begin="kam8.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 540,203.885" to="180 540,203.885" dur="1s" fill="freeze" begin="kam9.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 540,203.885" to="360 540,203.885" dur="1s" fill="freeze" begin="kam11.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 540,203.885" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M388,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 450,48)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 450,48" to="360 450,48" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 450,48" to="180 450,48" dur="1s" fill="freeze" begin="kam4.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 450,48" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M208,48 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#C19A6B" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(180 270,48)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 270,48" to="360 270,48" dur="1s" fill="freeze" begin="kam2.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 270,48" to="180 270,48" dur="1s" fill="freeze" begin="kam4.end"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" to="180 270,48" dur="1s" fill="freeze" begin="kaend.end"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M73,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(120 135,125.942)"><set attributeName="visibility" to="visible" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap2.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam2.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M73,281.82685902179844 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(60 135,281.827)"><set attributeName="visibility" to="visible" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam3.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M208,359.7691453623979 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(0 270,359.769)"><set attributeName="visibility" to="visible" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap3.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam3.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path><path class="arrowbrg" d="M163,125.94228634059948 v -12 h 100 v -12 l 24 24 l -24 24 v -12 h -100 Z" fill="#708090" stroke="none" stroke-width="2" visibility="hidden" transform="rotate(240 225,125.942)"><set attributeName="visibility" to="visible" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="#333" begin="kap4.begin+0.36s"/><set attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="visibility" to="hidden" begin="kaend.end"/></path></g><g class="bottomarea"><circle cx="90.00" cy="203.88" r="24" fill="#77d" stroke="none" stroke-width="4"><set attributeName="stroke" id="kaj0" to="white" begin="kastart.end+1s"/><set attributeName="visibility" to="hidden" begin="kam0.begin"/><set attributeName="visibility" to="visible" begin="kam0.end"/><set attributeName="cx" to="540.00" begin="kam0.end"/><set attributeName="cy" to="359.77" begin="kam0.end"/><set id="kad0" attributeName="stroke" to="none" begin="kam0.end+1.2s"/><set attributeName="stroke" id="kaj2" to="white" begin="kad1.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam2.begin"/><set attributeName="visibility" to="visible" begin="kam2.end"/><set attributeName="cx" to="270.00" begin="kam2.end"/><set attributeName="cy" to="203.88" begin="kam2.end"/><set id="kad2" attributeName="stroke" to="none" begin="kam2.end+1.2s"/><set attributeName="stroke" id="kaj4" to="white" begin="kad3.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam4.begin"/><set attributeName="visibility" to="visible" begin="kam4.end"/><set attributeName="cx" to="540.00" begin="kam4.end"/><set attributeName="cy" to="48.00" begin="kam4.end"/><set id="kad4" attributeName="stroke" to="none" begin="kam4.end+1.2s"/><set attributeName="stroke" id="kaj6" to="white" begin="kad5.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam6.begin"/><set attributeName="visibility" to="visible" begin="kam6.end"/><set attributeName="cx" to="540.00" begin="kam6.end"/><set attributeName="cy" to="359.77" begin="kam6.end"/><set id="kad6" attributeName="stroke" to="none" begin="kam6.end+1.2s"/><set attributeName="stroke" id="kaj8" to="white" begin="kad7.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam8.begin"/><set attributeName="visibility" to="visible" begin="kam8.end"/><set attributeName="cx" to="270.00" begin="kam8.end"/><set attributeName="cy" to="203.88" begin="kam8.end"/><set id="kad8" attributeName="stroke" to="none" begin="kam8.end+1.2s"/><set attributeName="stroke" id="kaj10" to="white" begin="kad9.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam10.begin"/><set attributeName="visibility" to="visible" begin="kam10.end"/><set attributeName="cx" to="540.00" begin="kam10.end"/><set attributeName="cy" to="48.00" begin="kam10.end"/><set id="kad10" attributeName="stroke" to="none" begin="kam10.end+1.2s"/><set id="kad11" attributeName="stroke" to="#e77" begin="kam11.end+1.2s"/><set attributeName="cx" to="90.00" begin="kaend.end"/><set attributeName="cy" to="203.88" begin="kaend.end"/><set attributeName="stroke" to="none" begin="kaend.end"/></circle><circle cx="630.00" cy="203.88" r="24" fill="#3d3" stroke="none" stroke-width="4"><set attributeName="stroke" id="kaj1" to="white" begin="kad0.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam1.begin"/><set attributeName="visibility" to="visible" begin="kam1.end"/><set attributeName="cx" to="90.00" begin="kam1.end"/><set attributeName="cy" to="203.88" begin="kam1.end"/><set id="kad1" attributeName="stroke" to="none" begin="kam1.end+1.2s"/><set attributeName="stroke" id="kaj3" to="white" begin="kad2.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam3.begin"/><set attributeName="visibility" to="visible" begin="kam3.end"/><set attributeName="cx" to="540.00" begin="kam3.end"/><set attributeName="cy" to="359.77" begin="kam3.end"/><set id="kad3" attributeName="stroke" to="none" begin="kam3.end+1.2s"/><set attributeName="stroke" id="kaj5" to="white" begin="kad4.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam5.begin"/><set attributeName="visibility" to="visible" begin="kam5.end"/><set attributeName="cx" to="270.00" begin="kam5.end"/><set attributeName="cy" to="203.88" begin="kam5.end"/><set id="kad5" attributeName="stroke" to="none" begin="kam5.end+1.2s"/><set attributeName="stroke" id="kaj7" to="white" begin="kad6.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam7.begin"/><set attributeName="visibility" to="visible" begin="kam7.end"/><set attributeName="cx" to="540.00" begin="kam7.end"/><set attributeName="cy" to="48.00" begin="kam7.end"/><set id="kad7" attributeName="stroke" to="none" begin="kam7.end+1.2s"/><set attributeName="stroke" id="kaj9" to="white" begin="kad8.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam9.begin"/><set attributeName="visibility" to="visible" begin="kam9.end"/><set attributeName="cx" to="540.00" begin="kam9.end"/><set attributeName="cy" to="359.77" begin="kam9.end"/><set id="kad9" attributeName="stroke" to="none" begin="kam9.end+1.2s"/><set attributeName="stroke" id="kaj11" to="white" begin="kad10.begin+1s"/><set attributeName="visibility" to="hidden" begin="kam11.begin"/><set attributeName="visibility" to="visible" begin="kam11.end"/><set attributeName="cx" to="270.00" begin="kam11.end"/><set attributeName="cy" to="203.88" begin="kam11.end"/><set id="kad11_1" attributeName="stroke" to="#e77" begin="kam11.end+1.2s"/><set attributeName="cx" to="630.00" begin="kaend.end"/><set attributeName="cy" to="203.88" begin="kaend.end"/><set attributeName="stroke" to="none" begin="kaend.end"/></circle></g><g class="middlearea" visibility="hidden"><set attributeName="visibility" to="hidden" begin="kaend.end"/></g><path id="movingroute" class="route_tmp hide" d="M540,359.7691453623979 L 630,203.88457268119896 L 450,203.88457268119896 L 270,203.88457268119896 " fill="none" stroke="#333" stroke-linejoin="round" stroke-width="4" stroke-dasharray="12 7" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="d" id="kap0" to="M 90.00,203.88 L 270.00,203.88 L 360.00,48.00 L 450.00,203.88 L 360.00,359.77 L 540.00,359.77" begin="kaj0.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap0.begin" end="kap0.end"/><set attributeName="d" id="kap1" to="M 630.00,203.88 L 540.00,48.00 L 450.00,203.88 L 270.00,203.88 L 90.00,203.88" begin="kaj1.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap1.begin" end="kap1.end"/><set attributeName="d" id="kap2" to="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 540.00,48.00 L 360.00,48.00 L 180.00,48.00 L 90.00,203.88 L 270.00,203.88" begin="kaj2.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap2.begin" end="kap2.end"/><set attributeName="d" id="kap3" to="M 90.00,203.88 L 180.00,359.77 L 360.00,359.77 L 450.00,203.88 L 630.00,203.88 L 540.00,359.77" begin="kaj3.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap3.begin" end="kap3.end"/><set attributeName="d" id="kap4" to="M 270.00,203.88 L 180.00,48.00 L 360.00,48.00 L 540.00,48.00" begin="kaj4.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap4.begin" end="kap4.end"/><set attributeName="d" id="kap5" to="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 360.00,48.00 L 270.00,203.88" begin="kaj5.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap5.begin" end="kap5.end"/><set attributeName="d" id="kap6" to="M 540.00,48.00 L 450.00,203.88 L 630.00,203.88 L 540.00,359.77" begin="kaj6.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap6.begin" end="kap6.end"/><set attributeName="d" id="kap7" to="M 270.00,203.88 L 360.00,48.00 L 450.00,203.88 L 540.00,48.00" begin="kaj7.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap7.begin" end="kap7.end"/><set attributeName="d" id="kap8" to="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 360.00,48.00 L 270.00,203.88" begin="kaj8.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap8.begin" end="kap8.end"/><set attributeName="d" id="kap9" to="M 540.00,48.00 L 450.00,203.88 L 630.00,203.88 L 540.00,359.77" begin="kaj9.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap9.begin" end="kap9.end"/><set attributeName="d" id="kap10" to="M 270.00,203.88 L 450.00,203.88 L 540.00,48.00" begin="kaj10.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap10.begin" end="kap10.end"/><set attributeName="d" id="kap11" to="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 270.00,203.88" begin="kaj11.begin+1s" dur="1s"/><set attributeName="visibility" to="visible" begin="kap11.begin" end="kap11.end"/></path><g class="toparea"><circle cx="0" cy="0" r="24" fill="#77d" stroke="lightyellow" stroke-width="4" stroke-dasharray="5 5" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="visibility" to="visible" begin="kam0.begin"/><animateMotion id="kam0" begin="kap0.end" dur="5s" fill="freeze" path="M 90.00,203.88 L 270.00,203.88 L 360.00,48.00 L 450.00,203.88 L 360.00,359.77 L 540.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam0.end"/><set attributeName="visibility" to="visible" begin="kam2.begin"/><animateMotion id="kam2" begin="kap2.end" dur="7s" fill="freeze" path="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 540.00,48.00 L 360.00,48.00 L 180.00,48.00 L 90.00,203.88 L 270.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam2.end"/><set attributeName="visibility" to="visible" begin="kam4.begin"/><animateMotion id="kam4" begin="kap4.end" dur="3s" fill="freeze" path="M 270.00,203.88 L 180.00,48.00 L 360.00,48.00 L 540.00,48.00"/><set attributeName="visibility" to="hidden" begin="kam4.end"/><set attributeName="visibility" to="visible" begin="kam6.begin"/><animateMotion id="kam6" begin="kap6.end" dur="3s" fill="freeze" path="M 540.00,48.00 L 450.00,203.88 L 630.00,203.88 L 540.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam6.end"/><set attributeName="visibility" to="visible" begin="kam8.begin"/><animateMotion id="kam8" begin="kap8.end" dur="4s" fill="freeze" path="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 360.00,48.00 L 270.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam8.end"/><set attributeName="visibility" to="visible" begin="kam10.begin"/><animateMotion id="kam10" begin="kap10.end" dur="2s" fill="freeze" path="M 270.00,203.88 L 450.00,203.88 L 540.00,48.00"/><set attributeName="visibility" to="hidden" begin="kam10.end"/></circle><circle cx="0" cy="0" r="24" fill="#3d3" stroke="lightyellow" stroke-width="4" stroke-dasharray="5 5" visibility="hidden"><animate class="dashoffset" attributeName="stroke-dashoffset" values="0;-24000" repeatCount="indefinite" dur="777s"/><set attributeName="visibility" to="visible" begin="kam1.begin"/><animateMotion id="kam1" begin="kap1.end" dur="4s" fill="freeze" path="M 630.00,203.88 L 540.00,48.00 L 450.00,203.88 L 270.00,203.88 L 90.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam1.end"/><set attributeName="visibility" to="visible" begin="kam3.begin"/><animateMotion id="kam3" begin="kap3.end" dur="5s" fill="freeze" path="M 90.00,203.88 L 180.00,359.77 L 360.00,359.77 L 450.00,203.88 L 630.00,203.88 L 540.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam3.end"/><set attributeName="visibility" to="visible" begin="kam5.begin"/><animateMotion id="kam5" begin="kap5.end" dur="4s" fill="freeze" path="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 360.00,48.00 L 270.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam5.end"/><set attributeName="visibility" to="visible" begin="kam7.begin"/><animateMotion id="kam7" begin="kap7.end" dur="3s" fill="freeze" path="M 270.00,203.88 L 360.00,48.00 L 450.00,203.88 L 540.00,48.00"/><set attributeName="visibility" to="hidden" begin="kam7.end"/><set attributeName="visibility" to="visible" begin="kam9.begin"/><animateMotion id="kam9" begin="kap9.end" dur="3s" fill="freeze" path="M 540.00,48.00 L 450.00,203.88 L 630.00,203.88 L 540.00,359.77"/><set attributeName="visibility" to="hidden" begin="kam9.end"/><set attributeName="visibility" to="visible" begin="kam11.begin"/><animateMotion id="kam11" begin="kap11.end" dur="3s" fill="freeze" path="M 540.00,359.77 L 630.00,203.88 L 450.00,203.88 L 270.00,203.88"/><set attributeName="visibility" to="hidden" begin="kam11.end"/></circle></g><animate id="kastart" begin="0s;kaend.end" attributeName="opacity" values="0;0;1" fill="freeze" dur="2s"/><animate id="kaend" begin="kad11.begin" attributeName="opacity" values="1;1;1;1;0" fill="freeze" dur="4s"/></svg>

ejsoon · 帖子由 **ejsoon** » 2026年 5月 7日 00:24

這個js配合這個css「.man { transition: transform 1s linear;}」實現移動動畫，但是會出現移動不連續的問題，比如當元素從1移到2，之後原本應該從2移到3，但是卻從1移到3。查明原因。

代码：全选

    // create animate motion
    function createAnimateMotion() {
        let moveman_top = men_top[current_man];
        let moveman_bottom = men_bottom[current_man];
        moveman_top.style.setProperty('transform', 'translate(0px)');
        moveman_bottom.style.setProperty('transform', 'translate(0px)');
        moveman_top.classList.add("man");
        moveman_bottom.classList.add("man");
        setTimeout(function() {
            let dur = route_tmp.length - 1;
            if (route_tmp.length > 1) {
                var rgo = 0;
                var rgoxbo = dots[route_tmp[rgo]].getAttribute("cx");
                var rgoxao = dots[route_tmp[rgo + 1]].getAttribute("cx");
                var rgoxo = parseInt(rgoxao) - parseInt(rgoxbo);
                var rgoybo = dots[route_tmp[rgo]].getAttribute("cy");
                var rgoyao = dots[route_tmp[rgo + 1]].getAttribute("cy");
                var rgoyo = parseInt(rgoyao) - parseInt(rgoybo);
                let transformStr = 'translate(' + rgoxo + 'px, ' + rgoyo + 'px)';
                moveman_top.style.setProperty('transform', transformStr);
                moveman_bottom.style.setProperty('transform', transformStr);
            }
            if (route_tmp.length > 2) {
                rgo++;
                cssmoveinroute = setInterval(function() {
                    let rgoxb = dots[route_tmp[rgo]].getAttribute("cx");
                    let rgoxa = dots[route_tmp[rgo + 1]].getAttribute("cx");
                    rgoxo = rgoxo + parseInt(rgoxa) - parseInt(rgoxb);
                    let rgoyb = dots[route_tmp[rgo]].getAttribute("cy");
                    let rgoya = dots[route_tmp[rgo + 1]].getAttribute("cy");
                    rgoyo = rgoyo + parseInt(rgoya) - parseInt(rgoyb);
                    let transformStr = 'translate(' + rgoxo + 'px, ' + rgoyo + 'px)';
                    moveman_top.style.setProperty('transform', transformStr);
                    moveman_bottom.style.setProperty('transform', transformStr);
                    rgo++;
                    if (rgo >= route_tmp.length - 1) {
                        clearInterval(cssmoveinroute);
                    }
                }, 1000);
            }
            cssturntimeout = setTimeout(function() {
                clearInterval(cssmoveinroute);
                let last_dot = dots[route_tmp[route_tmp.length - 1]];
                moveman_top.setAttribute("cx", last_dot.getAttribute("cx"));
                moveman_top.setAttribute("cy", last_dot.getAttribute("cy"));
                moveman_bottom.setAttribute("cx", last_dot.getAttribute("cx"));
                moveman_bottom.setAttribute("cy", last_dot.getAttribute("cy"));
                moveman_top.style.setProperty('transform', 'translate(0px)');
                moveman_bottom.style.setProperty('transform', 'translate(0px)');
                moveman_top.classList.remove("man");
                moveman_bottom.classList.remove("man");
                turnBridge();
            }, dur * 1000 + 7);
        }, 7);
    }


這個js配合這個css「.man { transition: transform 1s linear;}」實現移動動畫，但是會出現移動不連續的問題，比如當元素從1移到2，之後原本應該從2移到3，但是卻從1移到3。查明原因。

ejsoon · 帖子由 **ejsoon** » 2026年 5月 7日 00:32

gemini fast：

代码：全选

使用 **Web Animations API (WAAPI)** 改寫是個明智的選擇。它比 `setInterval` 配合 CSS 更穩定，因為它直接與瀏覽器的渲染引擎同步，且能精確處理多個關鍵幀（Keyframes）的銜接。

以下是改寫後的代碼，我將原本的「每秒移動一次」邏輯整合進了一個連續的動畫序列中：

### 改寫後的代碼

```javascript
function createAnimateMotion() {
    let moveman_top = men_top[current_man];
    let moveman_bottom = men_bottom[current_man];

    // 1. 準備路徑點資料 (Keyframes)
    let keyframes = [];
    let cumulativeX = 0;
    let cumulativeY = 0;

    // 起始點 (原點)
    keyframes.push({ transform: 'translate(0px, 0px)' });

    if (route_tmp.length > 1) {
        for (let i = 0; i < route_tmp.length - 1; i++) {
            let startDot = dots[route_tmp[i]];
            let endDot = dots[route_tmp[i + 1]];

            // 計算兩點間的偏移並累加
            let dx = parseInt(endDot.getAttribute("cx")) - parseInt(startDot.getAttribute("cx"));
            let dy = parseInt(endDot.getAttribute("cy")) - parseInt(startDot.getAttribute("cy"));
            
            cumulativeX += dx;
            cumulativeY += dy;

            keyframes.push({ 
                transform: `translate(${cumulativeX}px, ${cumulativeY}px)` 
            });
        }
    }

    // 2. 動畫參數設定
    let totalSteps = route_tmp.length - 1;
    let duration = totalSteps * 1000; // 每一步 1 秒

    let animationOptions = {
        duration: duration,
        easing: 'linear',
        fill: 'forwards' // 動畫結束後停留在最後一幀
    };

    // 3. 執行動畫
    let animTop = moveman_top.animate(keyframes, animationOptions);
    let animBottom = moveman_bottom.animate(keyframes, animationOptions);

    // 4. 動畫完成後的處理 (相當於原本的 setTimeout 邏輯)
    animTop.onfinish = function() {
        let last_dot = dots[route_tmp[route_tmp.length - 1]];
        let finalX = last_dot.getAttribute("cx");
        let finalY = last_dot.getAttribute("cy");

        // 更新實際座標屬性
        moveman_top.setAttribute("cx", finalX);
        moveman_top.setAttribute("cy", finalY);
        moveman_bottom.setAttribute("cx", finalX);
        moveman_bottom.setAttribute("cy", finalY);

        // 重置 transform (因為座標已經更新到 cx/cy 了)
        moveman_top.style.transform = 'none';
        moveman_bottom.style.transform = 'none';

        // 執行後續逻辑
        turnBridge();
    };
}
```

---

### 為什麼這樣改能解決你的問題？

1.  **消除「1移到3」跳躍現象**：
    在舊代碼中，`setInterval` 和 `setTimeout` 是獨立運作的。如果 `setInterval` 累加了多次座標但瀏覽器還沒渲染，或者 `setTimeout` 提前觸發了 `setAttribute` 重置，就會發生位置跳轉。WAAPI 使用一個完整的 `keyframes` 數組，瀏覽器會精確計算 `[0, 1, 2, 3]` 的路徑，保證不會跳過中間點。

2.  **單一真相來源**：
    我們一次性將所有路徑點交給瀏覽器處理。瀏覽器會自動分配時間：
    * 0%：點 1
    * 33%：點 2
    * 66%：點 3
    * 100%：點 4
    這種整體的進度控制比手動每秒更新一次 `transform` 要流暢得多。

3.  **精確的回調 (`onfinish`)**：
    原本的 `dur * 1000 + 7` 是一種「猜測」動畫結束時間的做法。`onfinish` 事件則是在動畫真正渲染結束後由引擎觸發，確保在更新 `cx/cy` 座標時，動畫已經確實完成，不會有視覺上的閃爍。

### 提示
* **移除 CSS 中的 `.man` 類別**：使用 WAAPI 後，你不再需要 CSS 的 `transition`，因為動畫邏輯已經移交給 JS 引擎處理。
* **關於 `fill: 'forwards'`**：這保證了動畫結束時元素會停在終點，直到你在 `onfinish` 中手動更新 `cx/cy` 並清除 `transform`。

Web Animations API何時出的？何時瀏覽器全面支援？跟requestAnimationFrame有何區別？

代码：全选

Web Animations API (WAAPI) 是一項旨在結合 CSS 動畫的性能與 JavaScript 動畫的靈活性而開發的標準。

以下是關於它的發展歷史、支援度以及與 `requestAnimationFrame` 區別的詳細解析：

---

## 1. 發展歷史與支援度

WAAPI 並非在單一時間點「突然出現」，而是經歷了長期的草案演進：

* **推出時間：** * W3C 大約在 **2012 - 2013 年** 開始草擬 Web Animations 規範。
    * Chrome 是先行者，約在 **2014 年 (Chrome 36)** 就實作了基礎功能（如 `.animate()` 方法）。
* **全面支援時間：**
    * **2020 年** 是關鍵的一年。隨著 **Safari 13.1** 和 **Firefox** 完成了對大多數核心特性的支援，WAAPI 達到了所謂的「主流瀏覽器全面支援」狀態。
    * 目前的支援度（Can I Use）已超過 **97%**。除非你需要支援極舊的 Internet Explorer，否則在現代網頁開發中可以放心使用。

---

## 2. WAAPI vs. requestAnimationFrame (rAF)

這兩者雖然都能實現動畫，但在底層邏輯和使用場景上有本質的區別：

### Web Animations API (WAAPI)
**定位：聲明式動畫 (Declarative)**

* **機制：** 你告訴瀏覽器「起點」、「終點」和「持續時間」，剩下的交給瀏覽器的動畫引擎去處理。
* **性能：** 動畫運行在**合成器執行緒 (Compositor Thread)** 上。這意味著即便主執行緒 (Main Thread) 被繁重的 JavaScript 阻塞，動畫通常依然能流暢運行。
* **優點：** * 語法簡潔（類似 CSS 寫法）。
    * 內建播放控制（暫停、倒放、跳轉、縮放時間）。
    * 自動處理硬體加速。
* **缺點：** 不適合需要進行複雜物理計算或每幀都要根據邏輯改變目標的路徑。

### requestAnimationFrame (rAF)
**定位：指令式動畫 (Imperative)**

* **機制：** 你要求瀏覽器「在下一次重繪前執行這段函數」。你需要手動計算每一幀的數值（例如：當前時間點物體應該在 X 軸哪個像素）。
* **性能：** 運行在**主執行緒 (Main Thread)**。如果主執行緒有大運算（如複雜 DOM 操作），動畫會掉幀（卡頓）。
* **優點：** * 極限的靈活性。你可以實現碰撞偵測、彈簧物理效果、或 canvas 繪圖。
    * 適合需要「每幀動態計算」的場景。
* **缺點：** * 代碼冗長且複雜。
    * 需要手動管理時間戳記（Delta time）以確保動畫速度在不同刷新率的螢幕上一致。

---

## 3. 快速對比表

| 特性 | Web Animations API (WAAPI) | requestAnimationFrame (rAF) |
| :--- | :--- | :--- |
| **控制方式** | 自動（設定 Keyframes 即可） | 手動（每一幀都要寫計算邏輯） |
| **執行緒** | 合成器執行緒 (不卡頓) | 主執行緒 (易受 JS 阻塞影響) |
| **互動功能** | 原生支援暫停、播放、倒放 | 需自行寫變數控制 |
| **適用場景** | UI 元素移動、淡入淡出、簡單路徑 | 遊戲開發、複雜物理引擎、Canvas 繪圖 |
| **代碼複雜度** | 低 | 高 |

---

### 總結建議
如果你只是想讓 DOM 元素從 A 移動到 B，或者執行一連串固定的動畫序列，**首選 Web Animations API**，因為它性能更好且更好維護。只有在開發遊戲或需要極高邏輯自定義的動畫時，才考慮使用 `requestAnimationFrame`。

你目前正在處理的 SVG 點對點移動邏輯，使用 WAAPI 是最平衡性能與開發成本的選擇。

ejsoon · 帖子由 **ejsoon** » 2026年 5月 7日 01:00

將代碼改成用requestAnimationFrame來做。

代码：全选

使用 `requestAnimationFrame` (rAF) 需要我們手動計算每一幀的進度（Progress），並根據時間差來更新元素的座標。

相較於 WAAPI 或 CSS，rAF 的邏輯會稍微複雜一點，因為它需要處理**時間管理**。

### 改寫後的代碼

```javascript
function createAnimateMotion() {
    let moveman_top = men_top[current_man];
    let moveman_bottom = men_bottom[current_man];

    // 1. 預先提取所有路徑點座標
    const pathPoints = route_tmp.map(index => ({
        x: parseInt(dots[index].getAttribute("cx")),
        y: parseInt(dots[index].getAttribute("cy"))
    }));

    if (pathPoints.length < 2) return;

    const durationPerStep = 1000; // 每一步 1000ms
    const totalSteps = pathPoints.length - 1;
    let startTime = null;

    // 2. 定義每一幀的繪製函數
    function animate(currentTime) {
        if (!startTime) startTime = currentTime;
        
        // 計算總進度 (0 到 1 之間)
        let elapsed = currentTime - startTime;
        let totalProgress = elapsed / (totalSteps * durationPerStep);

        if (totalProgress > 1) totalProgress = 1;

        // 計算當前處於哪一段路徑 (例如第 0 段到第 1 段)
        let currentStepFraction = totalProgress * totalSteps;
        let stepIndex = Math.floor(currentStepFraction);
        if (stepIndex >= totalSteps) stepIndex = totalSteps - 1;

        // 計算在當前這一段路徑內的小進度 (0~1)
        let innerProgress = currentStepFraction - stepIndex;

        // 3. 插值計算 (Linear Interpolation)
        let start = pathPoints[stepIndex];
        let end = pathPoints[stepIndex + 1];

        // 計算目前應該在的絕對座標
        let currentX = start.x + (end.x - start.x) * innerProgress;
        let currentY = start.y + (end.y - start.y) * innerProgress;

        // 4. 計算相對於初始位置 (點0) 的偏移量 (translate)
        let offsetX = currentX - pathPoints[0].x;
        let offsetY = currentY - pathPoints[0].y;

        let transformStr = `translate(${offsetX}px, ${offsetY}px)`;
        moveman_top.style.transform = transformStr;
        moveman_bottom.style.transform = transformStr;

        // 5. 判斷動畫是否結束
        if (totalProgress < 1) {
            requestAnimationFrame(animate);
        } else {
            // 動畫結束：更新屬性並重置 transform
            moveman_top.setAttribute("cx", pathPoints[totalSteps].x);
            moveman_top.setAttribute("cy", pathPoints[totalSteps].y);
            moveman_bottom.setAttribute("cx", pathPoints[totalSteps].x);
            moveman_bottom.setAttribute("cy", pathPoints[totalSteps].y);
            
            moveman_top.style.transform = 'none';
            moveman_bottom.style.transform = 'none';
            
            turnBridge();
        }
    }

    // 啟動動畫
    requestAnimationFrame(animate);
}
```

---

### 代碼邏輯解析

1.  **時間驅動而非步數驅動**：
    我們不再使用 `setInterval` 的「次數」來計時，而是通過 `currentTime - startTime` 得到絕對的毫秒數。這樣即便瀏覽器掉幀，物體也會移動到正確的位置，而不會變慢。

2.  **插值計算 (Lerp)**：
    公式為：$Current = Start + (End - Start) \times Progress$。
    這確保了在每一幀（通常是 16.7ms）中，物體都能平滑地移動到微小的間距，達到視覺上的連續性。

3.  **相對偏移處理**：
    因為你的 HTML/SVG 結構是基於 `cx` 和 `cy` 的，而動畫是用 `translate` 做偏移。我們計算 `(當前計算出的座標) - (起點座標)` 作為偏移量。

4.  **精確結束**：
    當 `totalProgress` 達到 1 時，我們手動調用 `turnBridge()`。這比 `setTimeout` 準確得多，因為它是在最後一幀渲染完成後立即執行的。

### rAF 版本的優點與缺點
* **優點**：你可以隨時在循環中加入複雜邏輯（例如：如果移動到某個點，突然改變顏色）。
* **缺點**：所有的計算都在 **JavaScript 主執行緒** 完成。如果你同時執行大量复杂的 JS，動畫可能會出現肉眼可見的卡頓（掉幀）。而在這種情況下，前一個建議的 **Web Animations API** 會表現得更流暢，因為它由瀏覽器內核優化處理。

ejsoon · 帖子由 **ejsoon** » 2026年 5月 7日 01:20

konigsberg20260507motion7951

再改掉動畫方式，改成requestAnimationFrame。

ejsoon · 帖子由 **ejsoon** » 2026年 5月 7日 01:31

konigsberg20260507motion7952

坐標不要parseInt。

ejsoon · 帖子由 **ejsoon** » 2026年 5月 9日 08:38

nothing

ejsoon · 帖子由 **ejsoon** » 2026年 5月 10日 08:36

在設置窗口中增加「En|中」語言切換按鈕至標題的右方，默認是英文。當處於英文語言狀態時，「設置窗口」和「思考窗口」中的文字都將是英文，將代碼中的中文翻譯成英文。

只需給出所要修改的地方，所有的代碼和注釋都要使用英文。

gemini pro：

代码：全选

Here are the specific parts of the code you need to modify to add the English/Chinese toggle button and support bilingual text. All comments within these blocks have been translated to English.

### 1. HTML Modifications

Replace the existing `<div id="thinking_ui">...</div>` and `<div id="mcts_modal">...</div>` (inside `#tiling_inner`) with the following code. It sets English as the default text and adds the toggle button along with identifying IDs for translation:

```html
            <div id="thinking_ui">🤔 Thinking...</div>
            <div id="mcts_modal">
                <div class="mcts_close" onclick="closeMctsModal()">×</div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <h3 style="margin: 0;" id="mcts_title">🤖 AI Search Settings</h3>
                    <button id="lang_toggle" style="margin-right: 20px; cursor: pointer; padding: 2px 6px;">En|中</button>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                    <span id="toggle_params" style="cursor: pointer; font-weight: bold; outline: none; color: #333;">▸ Expand</span>
                    <div id="mode_buttons" style="display: flex; gap: 4px;">
                        <button class="mode_btn" data-mode="easy" id="btn_easy">Easy</button>
                        <button class="mode_btn" data-mode="hard" id="btn_hard">Hard</button>
                        <button class="mode_btn" data-mode="expert" id="btn_expert">Expert</button>
                        <button class="mode_btn" data-mode="custom" id="btn_custom">Custom</button>
                    </div>
                </div>
                <div id="params_container" style="display: none;">
                    <div class="mcts_row"><label id="lbl_sims">Simulations:</label> <input type="number" id="mcts_sims" class="mcts_param_input" step="1" min="1"></div>
                    <div class="mcts_row"><label id="lbl_depth">Search Depth:</label> <input type="number" id="mcts_depth" class="mcts_param_input" step="1" min="1"></div>
                    <div class="mcts_row"><label id="lbl_max_path">Max Path:</label> <input type="number" id="mcts_max_path" max="9" step="1" min="1" class="mcts_param_input"></div>
                    <div class="mcts_row"><label id="lbl_first_path">1st Turn Max:</label> <input type="number" id="mcts_first_path" max="9" step="1" min="1" class="mcts_param_input"></div>
                    <div style="margin-top: 5px; margin-bottom: 5px;">
                        <div style="margin-bottom: 5px;" id="lbl_fcd">Forced Win (Bridges ➔ Depth):</div>
                        <div class="mcts_row" style="padding-left: 10px;">
                            <label>7</label><input type="number" id="fcd_depth1" style="width: 40px;" class="mcts_param_input" step="1" min="1">
                        </div>
                        <div class="mcts_row" style="padding-left: 10px;">
                            <label>12</label><input type="number" id="fcd_depth2" style="width: 40px;" class="mcts_param_input" step="1" min="1">
                        </div>
                        <div class="mcts_row" style="padding-left: 10px;">
                            <label>16</label><input type="number" id="fcd_depth3" style="width: 40px;" class="mcts_param_input" step="1" min="1">
                        </div>
                        <div class="mcts_row" style="padding-left: 10px;">
                            <label>19</label><input type="number" id="fcd_depth4" style="width: 40px;" class="mcts_param_input" step="1" min="1">
                        </div>
                    </div>
                </div>
                <hr>
                <div class="mcts_row">
                    <label><input type="checkbox" id="mcts_auto_blue"><span id="lbl_ai_blue">AI Blue</span></label>
                    <label><input type="checkbox" checked id="mcts_auto_green"><span id="lbl_ai_green">AI Green</span></label>
                </div>
                <button id="mcts_play_btn" style="width: 100%; padding: 8px; margin-top: 5px; cursor: pointer; display: none; background: #8278f5; color: white; border: none; border-radius: 4px; font-size: 16px;">Play Game</button>
                <button id="mcts_start_btn" style="width: 100%; padding: 8px; margin-top: 5px; cursor: pointer;">Start Search</button>
                <div id="mcts_results" style="margin-top: 10px; font-size: 14px;"></div>
            </div>

```

### 2. JavaScript Translations and Globals

Add this translation dictionary and global variables directly below the `<script>` tag, right before `const PRESETS = { ... };`:

```javascript
    // Current language state
    let currentLang = 'en';

    // Translation dictionary
    const I18N = {
        en: {
            title: "🤖 AI Search Settings",
            expand: "▸ Expand",
            collapse: "▾ Collapse",
            easy: "Easy",
            hard: "Hard",
            expert: "Expert",
            custom: "Custom",
            sims: "Simulations:",
            depth: "Search Depth:",
            maxPath: "Max Path:",
            firstPath: "1st Turn Max:",
            fcd: "Forced Win (Bridges ➔ Depth):",
            aiBlue: "AI Blue",
            aiGreen: "AI Green",
            play: "Play Game",
            startSearch: "Start Search",
            stopSearch: "Stop Search",
            searching: "Searching, please wait...",
            searchStatus: "<b>Searching...</b><br>",
            searchHalted: "Search aborted.",
            warnTurn: "Please search during a player's turn before clicking.",
            thinking: "🤔 <b>Thinking...</b><br>",
            shoot: "🎯 <b>Shot the opponent!</b><br>⏱️",
            noMoves: "❌ <b>0% Win Rate</b><br>No moves left!<br>⏱️",
            noMovesSimple: "❌ 0% Win Rate, no moves left!<br>⏱️",
            layer: "Depth:",
            branch: "Branch:",
            time: "Time:",
            sec: "s",
            kill: "🎯 Forced Mate!<br>⏱️",
            loss: "💀 Immediate Loss<br>⏱️",
            guaranteedLoss: "⚠️ Guaranteed Loss<br>⏱️",
            decided: "✅ <b>Decided!</b><br>Est. Win Rate:",
            searchDone: "<b>Search complete! Total {0} paths:</b><br><span style='font-size:13px; color:#555;'>⏱️ Total time: {1} s</span><br>",
            prevPage: "Prev",
            nextPage: "Next",
            page: "Page:",
            fatalMove: "<span style='color:red'>💀 Fatal Move</span>",
            guaranteedLossMove: "<span style='color:orange'>⚠️ Guaranteed Loss</span>",
            forcedMateMove: "<span style='color:green'>🎯 Forced Mate</span>",
            winRate: "Win Rate:"
        },
        zh: {
            title: "🤖 AI 搜尋設定",
            expand: "▸ 展開",
            collapse: "▾ 收回",
            easy: "簡單",
            hard: "困難",
            expert: "專家",
            custom: "自定",
            sims: "模擬次數:",
            depth: "搜尋深度:",
            maxPath: "最大步數:",
            firstPath: "首回限步:",
            fcd: "必勝搜尋 (橋數 ➔ 深度):",
            aiBlue: "AI 藍方",
            aiGreen: "AI 綠方",
            play: "開始遊戲",
            startSearch: "開始搜尋",
            stopSearch: "停止搜尋",
            searching: "搜尋中，請稍候...",
            searchStatus: "<b>搜尋中...</b><br>",
            searchHalted: "搜尋已中止。",
            warnTurn: "請在輪到玩家且未點擊時搜尋。",
            thinking: "🤔 <b>思考中...</b><br>",
            shoot: "🎯 <b>射殺對手！</b><br>⏱️",
            noMoves: "❌ <b>勝率0%</b><br>無路可走！<br>⏱️",
            noMovesSimple: "❌ 勝率0%，無路可走！<br>⏱️",
            layer: "層數:",
            branch: "分支:",
            time: "耗時:",
            sec: "秒",
            kill: "🎯 必殺！<br>⏱️",
            loss: "💀 告負<br>⏱️",
            guaranteedLoss: "⚠️ 必敗<br>⏱️",
            decided: "✅ <b>決定！</b><br>預估勝率:",
            searchDone: "<b>搜尋完成！共 {0} 條路徑：</b><br><span style='font-size:13px; color:#555;'>⏱️ 總耗時: {1} 秒</span><br>",
            prevPage: "上一頁",
            nextPage: "下一頁",
            page: "頁數:",
            fatalMove: "<span style='color:red'>💀 致命步</span>",
            guaranteedLossMove: "<span style='color:orange'>⚠️ 必敗步</span>",
            forcedMateMove: "<span style='color:green'>🎯 必殺走法</span>",
            winRate: "勝率:"
        }
    };

    // Update UI text based on currentLang
    function updateUIText() {
        const t = I18N[currentLang];
        document.getElementById('mcts_title').innerText = t.title;
        const toggleParams = document.getElementById('toggle_params');
        if (toggleParams.innerText.includes('▸')) toggleParams.innerText = t.expand;
        else toggleParams.innerText = t.collapse;
        
        document.getElementById('btn_easy').innerText = t.easy;
        document.getElementById('btn_hard').innerText = t.hard;
        document.getElementById('btn_expert').innerText = t.expert;
        document.getElementById('btn_custom').innerText = t.custom;
        
        document.getElementById('lbl_sims').innerText = t.sims;
        document.getElementById('lbl_depth').innerText = t.depth;
        document.getElementById('lbl_max_path').innerText = t.maxPath;
        document.getElementById('lbl_first_path').innerText = t.firstPath;
        document.getElementById('lbl_fcd').innerText = t.fcd;
        
        document.getElementById('lbl_ai_blue').innerText = t.aiBlue;
        document.getElementById('lbl_ai_green').innerText = t.aiGreen;
        
        document.getElementById('mcts_play_btn').innerText = t.play;
        
        const startBtn = document.getElementById('mcts_start_btn');
        if (!isMctsRunning) startBtn.innerText = t.startSearch;
        else startBtn.innerText = t.stopSearch;

        // Re-render list if exists
        if (currentMctsResults && currentMctsResults.length > 0) renderMctsResults();
    }

```

### 3. Modifying the `window.onload` Initialization

Find the `window.onload = function() { ... }` block and add the language toggle listener directly below `displayGame();`:

```javascript
        displayGame();

        // Bind language toggle button
        document.getElementById('lang_toggle').addEventListener('click', () => {
            currentLang = currentLang === 'en' ? 'zh' : 'en';
            updateUIText();
        });

        // Initialize UI translation
        updateUIText();

        // Bind mode buttons events

```

### 4. Updating Event Listeners for Dynamic Texts

Locate and replace the following specific functions and event listeners to ensure they use the `I18N` translations instead of hardcoded strings:

**Replace the `#toggle_params` click listener:**

```javascript
        // Bind expand/collapse button
        document.getElementById('toggle_params').addEventListener('click', function() {
            const container = document.getElementById('params_container');
            const t = I18N[currentLang];
            if (container.style.display === 'none') {
                container.style.display = 'block';
                this.innerText = t.collapse;
            } else {
                container.style.display = 'none';
                this.innerText = t.expand;
            }
        });

```

**Replace the `closeMctsModal()` string reset:**

```javascript
    // Window close and trigger control
    function closeMctsModal() {
        abortMcts = true; // Abort current search when closing window
        document.getElementById('mcts_start_btn').innerText = I18N[currentLang].startSearch; // Restore button text
        document.getElementById('mcts_modal').style.display = 'none';
        // ... (rest of the function remains identical)

```

**Replace `renderMctsResults()`:**

```javascript
    function renderMctsResults() {
        const t = I18N[currentLang];
        let maxPerPage = 5;
        let total = currentMctsResults.length;
        let totalPages = Math.ceil(total / maxPerPage) || 1;
        let start = currentMctsPage * maxPerPage;
        let end = Math.min(start + maxPerPage, total);

        let resultsHtml = t.searchDone.replace('{0}', total).replace('{1}', lastSearchTime);

        // Pagination UI
        resultsHtml += `
        <div style="margin-top: 10px; display: flex; justify-content: space-between; align-items: center;">
            <button onclick="changeMctsPage(-1)" ${currentMctsPage === 0 ? 'disabled' : ''}>${t.prevPage}</button>
            <span>${t.page} ${currentMctsPage + 1} / ${totalPages}</span>
            <button onclick="changeMctsPage(1)" ${currentMctsPage >= totalPages - 1 ? 'disabled' : ''}>${t.nextPage}</button>
        </div>`;

        for (let i = start; i < end; i++) {
            let stat = currentMctsResults[i];
            let pathStr = stat.move.join(" ➔ ");
            let scoreText = "";

            if (stat.immediateLoss) scoreText = t.fatalMove;
            else if (stat.guaranteedLoss) scoreText = t.guaranteedLossMove;
            else if (stat.guaranteedWin) scoreText = t.forcedMateMove;
            else scoreText = `${t.winRate} ${((stat.wins / stat.plays) * 100).toFixed(1)}%`;

            resultsHtml += `<div class="mcts_result_item" onclick="simulateMove([${stat.move}])">${i + 1}. [${pathStr}] | ${scoreText}</div>`;
        }

        document.getElementById('mcts_results').innerHTML = resultsHtml;
    }

```

**Replace `#mcts_start_btn` click listener:**

```javascript
    document.getElementById("mcts_start_btn").addEventListener('click', function() {
        const t = I18N[currentLang];
        // If searching, change to abort behavior
        if (isMctsRunning) {
            abortMcts = true;
            this.innerText = t.startSearch;
            return;
        }

        if (![1, 3].includes(game_status)) {
            document.getElementById('mcts_results').innerHTML = t.warnTurn;
            return;
        }

        this.innerText = t.stopSearch; // Change button to stop
        updateMctsParams();
        document.getElementById('mcts_results').innerHTML = t.searching;
        setTimeout(() => runMCTS(false), 50);
    });

```

### 5. Modifying `runMCTS()` Function

Inside the `runMCTS()` function, replace the hardcoded UI string updates with variables pulled from the `I18N` object:

**Replace the "Shooting opponent" block:**

```javascript
        if (canShootNow) {
            let elapsedSec = ((performance.now() - searchStartTime) / 1000).toFixed(1);
            const t = I18N[currentLang];
            let msg = `${t.shoot} ${elapsedSec} ${t.sec}`;
            let thinkingUI = document.getElementById('thinking_ui');
            let resultsUI = document.getElementById('mcts_results');

            if (isAuto) {
                thinkingUI.innerHTML = msg;
                thinkingUI.style.display = 'block';
                setTimeout(() => {
                    thinkingUI.style.display = 'none';
                    // Trigger click directly to settle game
                    let manDotOnClick = manOnClick.bind(men_bottom[current_man]);
                    manDotOnClick();
                }, 1500);
            } else {
                resultsUI.innerHTML = msg;
            }
            isMctsRunning = false;
            document.getElementById('mcts_start_btn').innerText = t.startSearch;
            return; // Terminate further MCTS expansion
        }

```

**Replace the "No moves left" block:**

```javascript
        let isFirstGameTurn = game_hp <= 1;
        let rootMoves = getLegalMoves(rootState, isFirstGameTurn);
        if (rootMoves.length === 0) {
            let elapsedSec = ((performance.now() - searchStartTime) / 1000).toFixed(1);
            const t = I18N[currentLang];
            if (!isAuto) {
                document.getElementById('mcts_results').innerHTML = `${t.noMovesSimple} ${elapsedSec} ${t.sec}`;
            } else {
                let thinkingUI = document.getElementById('thinking_ui');
                thinkingUI.innerHTML = `${t.noMoves} ${elapsedSec} ${t.sec}`;
                thinkingUI.style.display = 'block';
                setTimeout(() => {
                    thinkingUI.style.display = 'none';
                    let manDotOnClick = manOnClick.bind(men_bottom[current_man]);
                    manDotOnClick(); // Click own piece
                    setTimeout(() => {
                        btn_finish.onclick(); // Click finish directly to lose
                    }, 500);
                }, 1500);
            }
            isMctsRunning = false;
            return;
        }

```

**Replace inside `processNextChunk()` (Aborting and Iterating):**

```javascript
        // Asynchronous chunk processing
        function processNextChunk() {
            const t = I18N[currentLang];
            
            // Check for abort signal every iteration
            if (abortMcts) {
                isMctsRunning = false;
                document.getElementById('mcts_start_btn').innerText = t.startSearch;
                document.getElementById('thinking_ui').style.display = 'none';
                if (!isAuto) document.getElementById('mcts_results').innerHTML = t.searchHalted;
                return;
            }

            if (moveIndex < totalMoves) {
                let move = rootMoves[moveIndex];

                // Real-time UI update and elapsed time calculation
                let elapsedSec = ((performance.now() - searchStartTime) / 1000).toFixed(1);
                let statusText = `${t.layer} ${PARAMS.MAX_DEPTH}<br>${t.branch} ${moveIndex + 1} / ${totalMoves}<br>⏱️ ${t.time} ${elapsedSec} ${t.sec}`;

                if (isAuto) {
                    thinkingUI.innerHTML = `${t.thinking}${statusText}`;
                } else {
                    resultsUI.innerHTML = `${t.searchStatus}${statusText}`;
                }

                // ... (rest of the core deduction logic remains identical until the end of block)

```

**Replace inside `processNextChunk()` (Completion processing):**

```javascript
            } else {
                // Search finished, process results
                isMctsRunning = false;
                document.getElementById('mcts_start_btn').innerText = I18N[currentLang].startSearch; // Search ends, restore button automatically

                // Store total elapsed time for renderMctsResults
                lastSearchTime = ((performance.now() - searchStartTime) / 1000).toFixed(1);

                // ... (Sorting logic remains exactly the same until updating the end UI below) ...

                if (isAuto) {
                    let bestStat = moveStats[0];
                    if (bestStat.guaranteedWin) {
                        thinkingUI.innerHTML = `${t.kill} ${lastSearchTime} ${t.sec}`;
                    } else if (bestStat.immediateLoss) {
                        thinkingUI.innerHTML = `${t.loss} ${lastSearchTime} ${t.sec}`;
                    } else if (bestStat.guaranteedLoss) {
                        thinkingUI.innerHTML = `${t.guaranteedLoss} ${lastSearchTime} ${t.sec}`;
                    } else {
                        thinkingUI.innerHTML = `${t.decided} ${((bestStat.wins / bestStat.plays) * 100).toFixed(1)}%<br>⏱️ ${lastSearchTime} ${t.sec}`;
                    }

                    setTimeout(() => simulateMove(bestStat.move), 800);
                } else {
                    currentMctsResults = moveStats;
                    currentMctsPage = 0;
                    renderMctsResults(); // Call pagination render
                }
            }

```

改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

Re: 改下哥尼斯堡網頁程式

在线用户