改下哥尼斯堡網頁程式

分享和讨论Javascript相关的话题
回复
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

附件
konigsberg20260417history793.7z
(20.03 KiB) 已下载 16 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

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

代码: 全选

<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>
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

藍方終於獲勝:

代码: 全选

<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>
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

附件
konigsberg20260418icons794.7z
(20.04 KiB) 已下载 20 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

為何導出會存在「 height: 414px; width: 886px;」?
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

附件
konigsberg20260420icons795.7z
(20.07 KiB) 已下载 17 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

哥尼斯堡,輸給困難等級:

代码: 全选

<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>
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

正著可以和棋:

代码: 全选

<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>
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

這個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。查明原因。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

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 是最平衡性能與開發成本的選擇。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

將代碼改成用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** 會表現得更流暢,因為它由瀏覽器內核優化處理。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

konigsberg20260507motion7951

再改掉動畫方式,改成requestAnimationFrame。
附件
konigsberg20260507motion7951.7z
(20.4 KiB) 已下载 3 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5476
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

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

帖子 ejsoon »

konigsberg20260507motion7952

坐標不要parseInt。
附件
konigsberg20260507motion7952.7z
(20.4 KiB) 已下载 3 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复

在线用户

正浏览此版面之用户: 没有注册用户 和 1 访客