How to get children from external SVG file?

Question

I'm trying to add jQuery hover events to an SVG. I want specific paths to trigger different events.

This is what I have:

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

<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>

but with an external SVG like this:

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

You would have to detect when the loading of the external SVG is completed and then run your code after that happens. — Matthew Herbst, Jan 12 '16 at 20:01
I'm not sure how to do that. [This post might be relevant](http://stackoverflow.com/questions/14068031/embedding-external-svg-in-html-for-javascript-manipulation). You might also want to ask a new dedicated question. — Matthew Herbst, Jan 12 '16 at 21:23
What's the problem? Put the jquery script in the svg file and it should work no? — Robert Longson, Jan 12 '16 at 21:29
var petals = $('#flower').children('svg').children('path'); does not yield each element when i'm using a local svg file, and the link suggests getting it by document.getElementsByTagName("svg"), but that yields undefined — merhoo, Jan 12 '16 at 22:06
To reiterate, the javascript is **in** the svg file itself and not in the host html file isn't it? — Robert Longson, Jan 12 '16 at 22:26
@merhoo jQuery works somewhat for SVG, the particular part of it the OP is using should be fine. — Robert Longson, Jan 12 '16 at 22:28
@RobertLongson the javascript is not in the SVG. The svg is in an assets folder which is loaded onto the html doc in an object element. I'm trying to access the SVG's paths throught javascript/jquery — merhoo, Jan 12 '16 at 22:34
Easiest if you put the javascript in the SVG, otherwise if you're set on having it in the host html file see this: https://jwatt.org/svg/demos/scripting-across-object.html — Robert Longson, Jan 12 '16 at 22:35

How to get children from external SVG file?

0 Answers0