改下哥尼斯堡網頁程式
Re: 改下哥尼斯堡網頁程式
當打開history,modal窗口將關閉。設#g12155背景為lightblue以使其可以點擊。
https://ejsoon.vip/wp-content/uploads/2 ... ry793.html
- 附件
-
konigsberg20260417history793.7z- (20.03 KiB) 已下载 16 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
代码: 全选
<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/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
代码: 全选
<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/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
改icons的width和height,max-width=36。
https://ejsoon.vip/wp-content/uploads/2 ... ns794.html
- 附件
-
konigsberg20260418icons794.7z- (20.04 KiB) 已下载 20 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
解決導出svg存在style-width和height的問題。
https://ejsoon.vip/wp-content/uploads/2 ... ns795.html
- 附件
-
konigsberg20260420icons795.7z- (20.07 KiB) 已下载 17 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
代码: 全选
<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/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
代码: 全选
<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/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
代码: 全选
// 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/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
代码: 全选
使用 **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/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
代码: 全选
使用 `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/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
再改掉動畫方式,改成requestAnimationFrame。
- 附件
-
konigsberg20260507motion7951.7z- (20.4 KiB) 已下载 3 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
Re: 改下哥尼斯堡網頁程式
坐標不要parseInt。
- 附件
-
konigsberg20260507motion7952.7z- (20.4 KiB) 已下载 3 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
弈趣極光:享受思維樂趣
在线用户
正浏览此版面之用户: 没有注册用户 和 0 访客
