動畫 svg 的圓圈和將鼠標懸停在圓圈上時連接它們的線

Question

我正在嘗試為 svg 的圓圈制作動畫，這些圓圈與線相連，當我 hover 在一個圓圈上時，我希望它變大並且連接到它的線相應地移動以產生一種連鎖反應

我對 svg animation 沒有太多經驗，我不知道該怎么做 animation

這是svg的代碼

 <svg id="bfb968cf-9c10-4b95-976d-39572f14cca2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"> <defs> <style>.b86d321e-e933-41e7-b9de-d8906ab9f495, .ef4e3f04-0106-47f8-8a64-7bb7dd93b258, .f80b12b3-a424-4691-a5c5-992c4f51bc1f { font-size: 24px; fill: #5c544d; font-family: Hexa-Regular, Hexa; }.ef4e3f04-0106-47f8-8a64-7bb7dd93b258 { letter-spacing: 0.02em; }.f2cd310d-b27c-4166-b6f2-b74eb0cdf1bd { letter-spacing: 0em; }.bdbcd047-f773-490f-86ef-0d798867384b { letter-spacing: 0em; }.a19a26da-c5ac-4b94-a7d4-3221e60d5b51, .f80b12b3-a424-4691-a5c5-992c4f51bc1f { letter-spacing: 0.06em; }.bf0941cb-c007-4f16-9a27-ac559d28bfc0 { letter-spacing: 0.02em; }.b86d321e-e933-41e7-b9de-d8906ab9f495 { letter-spacing: 0.06em; }.b9de3256-70f2-4f00-8b48-12b6f4390d90 { letter-spacing: -0.03em; }.f4b96596-c939-4864-967e-2d34a78c69ab { letter-spacing: 0em; }.b9584f6a-da5e-4638-8b98-4dac45f69f56 { letter-spacing: 0.02em; }.e40c86bd-0e22-4607-89ad-a265a6cc9925 { letter-spacing: 0.02em; }.b63043ff-c18f-4363-b573-f0361ffdc8e6 { letter-spacing: 0.04em; }.b811864c-bf80-449e-ba8d-70fe601827aa { fill: none; stroke: #e28300; stroke-miterlimit: 10; stroke-width: 2px; }.b9690ebb-88ed-4f4a-97b0-e6f302cd6775 { fill: #e28300; }.b0499ca3-0d59-4e49-a54b-b88cc4714521 { fill: #f9b873; }.acc390ca-5860-4b56-9b05-19b3d11cd9c2 { fill: #f39f40; }.big-circle:hover { fill: #d63628; r: 35px; transition: 500ms all ease-out; } </style> </defs><text class="ef4e3f04-0106-47f8-8a64-7bb7dd93b258" transform="translate(701.1 392.76)">D <tspan class="f2cd310d-b27c-4166-b6f2-b74eb0cdf1bd" x="13.46" y="0">A</tspan> <tspan class="bdbcd047-f773-490f-86ef-0d798867384b" x="25.66" y="0">T</tspan> <tspan class="a19a26da-c5ac-4b94-a7d4-3221e60d5b51" x="36.34" y="0">A</tspan> <tspan class="a19a26da-c5ac-4b94-a7d4-3221e60d5b51"> <tspan x="-45.46" y="30.95">ENGINEERING</tspan> </tspan> </text><text class="f80b12b3-a424-4691-a5c5-992c4f51bc1f" transform="translate(560.12 624.41)">M <tspan class="bf0941cb-c007-4f16-9a27-ac559d28bfc0" x="17.23" y="0">A</tspan> <tspan x="30.07" y="0">CHINE</tspan> <tspan x="-4.82" y="30.95">LEARNING</tspan> </text><text class="f80b12b3-a424-4691-a5c5-992c4f51bc1f" transform="translate(876.99 615.02)">DEEP <tspan x="-24.6" y="30.95">LEARNING</tspan></text><text class="b86d321e-e933-41e7-b9de-d8906ab9f495" transform="translate(1004.44 358.63)">COMPUTER <tspan x="22.54" y="30.95">VISION</tspan></text><text class="b86d321e-e933-41e7-b9de-d8906ab9f495" transform="translate(1324.95 304.56)">TIME-SERIES <tspan x="16.35" y="30.95">ANA</tspan> <tspan class="b9de3256-70f2-4f00-8b48-12b6f4390d90" x="58.6" y="30.95">L</tspan> <tspan x="67.45" y="30.95">YSIS</tspan> </text><text class="b86d321e-e933-41e7-b9de-d8906ab9f495" transform="translate(1354.79 617.16)">N <tspan class="f4b96596-c939-4864-967e-2d34a78c69ab" x="14.79" y="0">A</tspan> <tspan x="26.99" y="0">TURAL</tspan> <tspan x="-8.61" y="30.95">LANG</tspan> <tspan class="b9584f6a-da5e-4638-8b98-4dac45f69f56" x="46.15" y="30.95">U</tspan> <tspan class="e40c86bd-0e22-4607-89ad-a265a6cc9925" x="59.52" y="30.95">A</tspan> <tspan x="72.22" y="30.95">GE</tspan> <tspan x="-20.41" y="61.91">P</tspan> <tspan class="b63043ff-c18f-4363-b573-f0361ffdc8e6" x="-7.31" y="61.91">R</tspan> <tspan x="6.17" y="61.91">OCESSING</tspan> </text><text class="b86d321e-e933-41e7-b9de-d8906ab9f495" transform="translate(1147.4 534.57)">REINFORCEMENT<tspan x="35.87" y="30.95">LEARNING</tspan> </text><text class="ef4e3f04-0106-47f8-8a64-7bb7dd93b258" transform="translate(416.52 389.37)">D <tspan class="f2cd310d-b27c-4166-b6f2-b74eb0cdf1bd" x="13.46" y="0">A</tspan> <tspan class="bdbcd047-f773-490f-86ef-0d798867384b" x="25.66" y="0">T</tspan> <tspan class="a19a26da-c5ac-4b94-a7d4-3221e60d5b51" x="36.34" y="0">A</tspan> <tspan class="a19a26da-c5ac-4b94-a7d4-3221e60d5b51"> <tspan x="-19.98" y="30.95">SCIENCE</tspan> </tspan> </text> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775 big-circle" cx="439.81" cy="470.95" r="17.91" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775 big-circle" cx="1060.03" cy="441.14" r="17.91" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1158.3" y1="675.22" x2="1201.86" y2="705.03" /> <polyline class="b811864c-bf80-449e-ba8d-70fe601827aa" points="1395.61 740.57 1421.22 702.66 1455.22 758.91 1395.61 740.57 1346.31 752.03 1201.86 705.03" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1693.68" y1="479.19" x2="1455.22" y2="758.91" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1421.67" cy="703.74" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1455.8" cy="758.38" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1346.89" cy="751.5" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1201.29" cy="705.64" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1157.73" cy="675.83" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1248.29" cy="657.49" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1132.51" cy="618.51" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1284.98" cy="574.95" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="980.03" cy="649.47" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="946.78" cy="728.57" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="826.41" cy="772.13" r="3.51" /> <polygon class="b811864c-bf80-449e-ba8d-70fe601827aa" points="582.79 708.47 441.78 519.31 440.64 468.87 724.51 469.38 885.45 705.03 804.05 679.81 646.99 777.26 582.79 708.47" /> <path class="b811864c-bf80-449e-ba8d-70fe601827aa" d="M613.75,482.63l63,26.36L725,468.87l89.42-21.78L1131.93,617.9l81.4,8-154.77,14.9L979.46,650l-96.3,34.4-55,87.12L947.36,728l-61.91-27.51-302.66,8L708.9,682.1l-36.69-29.8s-134.13,102-141,103.17" /> <path class="b811864c-bf80-449e-ba8d-70fe601827aa" d="M676.8,509,672.21,652.3,790.3,515.87,980.6,491.8l29.81,24.07L980.6,491.8l142.16-104.33,243,50.44L1379.56,384l-60.76,3.44L1094.1,478l-83.69-48.15-220.11,86L723.8,462l-110,20.64L506,443.65l-65.34,25.22L514,502.11l-25.22,209.8L346.63,521.6,195.3,538.8l245.34-69.93s-90.57,48.15-94,52.73" /> <path class="b811864c-bf80-449e-ba8d-70fe601827aa" d="M1696.22,477.66l214-75-451.56-37-69.93,19.49L1422,436.77,1285.55,574.34l-72.22,51.59-55,49.29L947.36,728,1201.86,705l45.86-48.15,37.83-82.54s401.25-97.45,408.13-95.15-305-94-305-94l-324.06,54.37,148.66,186.38L885.45,700.45" /> <polyline class="b811864c-bf80-449e-ba8d-70fe601827aa" points="195.3 538.8 582.79 708.47 440.64 468.87" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="708.9" y1="682.1" x2="804.05" y2="679.81" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1010.41" y1="515.87" x2="1109" y2="471.16" /> <polyline class="b811864c-bf80-449e-ba8d-70fe601827aa" points="1213.33 625.93 1395.61 740.57 1693.68 479.19 1421.98 436.77" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="804.63" cy="680.42" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="647.57" cy="776.72" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="708.33" cy="681.57" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="672.79" cy="652.91" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="488.21" cy="712.52" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="531.21" cy="755.52" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="194.73" cy="539.41" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="346.06" cy="522.21" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="442.36" cy="518.77" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="514.58" cy="502.72" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="506.56" cy="444.26" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="614.32" cy="482.09" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="677.37" cy="509.6" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="789.72" cy="516.48" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="813.8" cy="447.7" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1009.84" cy="429.35" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="980.03" cy="492.41" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1009.84" cy="515.33" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1122.19" cy="388.08" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1094.67" cy="477.5" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1318.23" cy="389.23" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1365.23" cy="438.52" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1422.55" cy="437.38" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1459.24" cy="366.3" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775" cx="1693.11" cy="478.65" r="3.51" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775 big-circle" cx="1395.93" cy="740.36" r="17.91" /> <circle class="b9690ebb-88ed-4f4a-97b0-e6f302cd6775 big-circle" cx="726.42" cy="473.24" r="17.91" /> <circle class="b0499ca3-0d59-4e49-a54b-b88cc4714521 big-circle" cx="1386.76" cy="384.97" r="17.91" /> <circle class="acc390ca-5860-4b56-9b05-19b3d11cd9c2 big-circle" cx="589.99" cy="705.97" r="17.91" /> <circle class="acc390ca-5860-4b56-9b05-19b3d11cd9c2 big-circle" cx="1212.5" cy="621.13" r="17.91" /> <circle class="b0499ca3-0d59-4e49-a54b-b88cc4714521 big-circle" cx="882.33" cy="696.8" r="17.91" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="531.22" y1="755.66" x2="488.22" y2="712.66" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="647.22" y1="776.66" x2="828.22" y2="771.66" /> <polyline class="b811864c-bf80-449e-ba8d-70fe601827aa" points="-13.78 498.66 195.22 539.66 -11.32 631.72" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1421.22" y1="703.66" x2="1248.22" y2="656.66" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="1693.22" y1="478.66" x2="1911.76" y2="442.84" /> <line class="b811864c-bf80-449e-ba8d-70fe601827aa" x1="-12.51" y1="560.72" x2="195.22" y2="539.66" /> </svg>

這就是它的樣子：

Answer 1

我不確定您是否可以僅使用 svg 來實現此目的。 但是你可以使用 canvas 來獲得你想要的 animation。

有一些庫，例如 particle.js，您可以獲得類似的結果。

https://vincentgarreau.com/particles.js/

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations

Answer 2

當你把鼠標放在一個圓上時，你不能“波紋”連接的線，因為你沒有這些線與你的圓的隱含關系。 當然，僅使用 SVG 並不容易。

如果您將所有圓圈及其連接線分組（SVG G 元素），那將是一種方式。 使用 javascript，您會找到一個圈子的父組 ID，然后生成該組中所有行的 animation。 這可能意味着您將有冗余，例如復制文件中的行（從所有圈子到所有圈子），因此也需要找到它們並制作它們的動畫。

可能更好的方法是使用像“circle-1”這樣的圓圈 ID，並且所有連接到它的線都具有“c1”樣式。 第二個圓圈的 ID 為“circle-2”，與之相連的線條樣式為“c2”（線條可能附加了多個 styles，如 class="c1 c4 c5"）。

然后你會找到所有連接到一個圓的線，解析它的 ID 屬性，得到一個數字，並且 select 所有在“c”字符之后具有相同數字的線。 並為他們產生 animation 效果。

因此，如果 web 瀏覽器支持，這可能與同一 SVG 中的 SCRIPT 部分一起工作，但肯定會在顯示 SVG 的 web 頁面中工作。

最好的解決方案可能更面向數據，將 your.network 轉換為 D3.js 圖表，您可以使用內置層次結構更輕松地找到線條（例如鏈接）。 我不確定您是否可以輕松做到這一點，因為您的圖表尚未關閉。