如何解决将鼠标悬停在一个圆上时，对连接它们的圆和线的svg进行动画处理
我正在尝试为与线连接的svg圆制作动画，当我将鼠标悬停在一个圆上时，我希望它变大并且与之相连的线相应地移动以产生一种波纹效果
>我对svg动画没有太多经验，也不知道如何制作此动画
这是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>这是它的外观：
解决方法
我不确定您是否只能使用svg来实现。但是您可以使用画布来获得所需的动画。
有一些诸如particle.js之类的库，您可以获得类似的结果。
https://vincentgarreau.com/particles.js/
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
,当您将鼠标放在圆上时，您不能“波纹”连接的线，因为这些线与圆没有隐含的关系。当然，仅使用SVG并非易事。
如果将所有圆及其连接的线归为一组（SVG G元素），那将是一种方法。使用javascript，您将找到一个圆的父组ID，然后生成该组中所有线的动画。那可能意味着您将拥有冗余，例如放入文件中的行（从所有圆到所有圆）重复，因此也需要查找它们并为其设置动画。
可能更好的方法是使圆的ID像“ circle-1”，并且所有与其连接的线都具有样式“ c1”。第二个圆的ID为“ circle-2”，并且连接到其上的线的样式为“ c2”（线可能附加了几种样式，例如class =“ c1 c4 c5”）。
然后，您将找到所有与圆连接的线，都将对其ID属性进行解析，获取一个数字，然后选择所有带有“ c”字符后相同编号的线。并为其生成动画效果。
因此，如果Web浏览器支持的话，这可能与同一SVG中的SCRIPT部分一起使用，但绝对可以在显示SVG的网页中使用。
最好的解决方案可能是面向数据，将您的网络转换为D3.js图表，您可以使用内置的层次结构更轻松地找到线（例如链接）。由于您的图表未关闭，我不确定您可以轻松地做到这一点。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。