Question

我试图将jQuery悬停事件添加到SVG。我想要特定的路径来触发不同的事件。

这就是我所拥有的：

＆＃13;

var petals = $('#flower').children('svg').children('path');
petals.each(function() {
  console.log(this.id);
});

＆＃13;

<div id="flower" class="svg-container">
  <svg width="489pt" height="476pt" viewBox="0 0 489 476" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path id="petal0" d=" M 232.19 43.20 C 235.64 40.61 240.59 40.30 244.19 42.79 C 250.55 47.08 254.02 54.36 256.69 61.32 C 263.21 79.68 264.15 99.47 263.66 118.79 C 262.40 151.81 255.22 184.41 244.50 215.60 C 242.58 220.84 241.01 226.25 238.39 231.21 C 223.82 194.58 214.42 155.55 213.26 116.04 C 212.92 98.12 214.06 79.86 219.79 62.75 C 222.42 55.50 225.78 47.89 232.19 43.20 Z" />
    <path id="petal1" d=" M 102.47 96.58 C 106.87 95.02 111.70 95.62 116.14 96.72 C 127.01 99.61 136.67 105.72 145.64 112.32 C 160.76 123.73 173.89 137.58 185.65 152.38 C 199.82 170.18 211.97 189.54 222.38 209.76 C 226.16 217.53 230.38 225.12 233.29 233.29 C 224.42 230.06 216.11 225.52 207.68 221.31 C 177.00 205.20 147.99 185.18 124.20 159.82 C 114.82 149.55 106.09 138.43 100.20 125.75 C 97.32 119.27 94.86 112.16 95.91 104.98 C 96.40 101.26 98.88 97.83 102.47 96.58 Z" />
    <path id="petal2" d=" M 359.29 97.15 C 363.93 95.84 368.95 94.98 373.69 96.30 C 377.33 97.21 380.17 100.42 380.88 104.07 C 382.27 110.75 380.21 117.54 377.70 123.70 C 372.65 135.48 364.90 145.89 356.60 155.57 C 333.42 181.72 304.48 202.21 273.92 218.87 C 264.01 223.99 254.18 229.39 243.71 233.28 C 245.37 228.34 247.76 223.70 250.02 219.02 C 265.18 187.57 284.40 157.84 308.62 132.59 C 315.46 125.40 322.92 118.80 330.81 112.79 C 339.48 106.26 348.84 100.32 359.29 97.15 Z" />
    <path id="petal3" d=" M 67.52 218.31 C 84.97 213.43 103.28 212.77 121.29 213.43 C 155.26 215.09 188.75 222.81 220.71 234.29 C 224.28 235.55 227.86 236.82 231.22 238.60 C 195.97 252.72 158.45 261.74 120.46 263.60 C 101.93 264.19 83.02 263.48 65.18 257.99 C 58.30 255.80 51.39 252.94 45.99 248.00 C 43.27 245.43 40.85 241.98 41.06 238.06 C 41.34 233.74 44.32 230.17 47.60 227.61 C 53.41 223.01 60.47 220.36 67.52 218.31 Z" />
    <path id="petal4" d=" M 356.54 213.38 C 375.35 212.79 394.55 213.52 412.61 219.28 C 420.06 221.74 427.72 224.97 432.96 231.05 C 435.89 234.42 437.09 239.62 434.55 243.56 C 430.59 250.15 423.28 253.70 416.39 256.43 C 401.91 261.71 386.38 263.47 371.04 263.75 C 349.15 264.19 327.31 261.46 305.91 256.97 C 285.41 252.49 265.18 246.54 245.75 238.60 C 249.59 236.56 253.73 235.18 257.82 233.75 C 289.57 222.48 322.83 214.95 356.54 213.38 Z" />
    <path id="petal5" d=" M 175.57 274.54 C 193.88 262.66 213.07 251.94 233.30 243.70 C 230.24 252.11 225.95 259.99 222.00 268.00 C 206.86 297.13 188.15 324.62 164.94 347.93 C 152.72 359.71 139.39 370.87 123.71 377.71 C 116.87 380.40 108.96 382.96 101.77 380.11 C 96.70 378.02 95.16 371.97 95.71 366.99 C 96.78 355.55 102.72 345.33 109.01 335.99 C 126.54 311.06 150.40 291.35 175.57 274.54 Z" />
  </svg>
</div>

＆＃13;

但是使用这样的外部SVG：

＆＃13;

<div class="svg-container">
  <object id="flower" type="image/svg+xml" data="./assets/flower.svg" width="100%" height="100%" class="svg-content">
  </object>
</div>

＆＃13;

如何从外部SVG文件中获取子项？

0 个答案: