Show More
@@ -494,9 +494,36 b' var IPython = (function (IPython) {' | |||||
494 |
|
494 | |||
495 |
|
495 | |||
496 | OutputArea.prototype.append_svg = function (svg, md, element) { |
|
496 | OutputArea.prototype.append_svg = function (svg, md, element) { | |
497 | var toinsert = $("<div/>").addClass("output_subarea output_svg"); |
|
497 | // To avoid style or use collisions between multiple svg figures, | |
498 | toinsert.append(svg); |
|
498 | // svg figures are wrapped inside an iframe. | |
499 | element.append(toinsert); |
|
499 | ||
|
500 | var iframe = $('<iframe/>') | |||
|
501 | iframe.attr('frameborder', 0); | |||
|
502 | iframe.attr('scrolling', 'no'); | |||
|
503 | ||||
|
504 | var wrapper = $("<div/>").addClass("output_subarea output_svg"); | |||
|
505 | wrapper.append(svg); | |||
|
506 | ||||
|
507 | // Once the iframe is loaded, the svg is dynamically inserted | |||
|
508 | iframe.on('load', function() { | |||
|
509 | // Set the iframe height and width to fit the svg | |||
|
510 | // (the +10 pixel offset handles the default body margins | |||
|
511 | // in Chrome) | |||
|
512 | var svg = wrapper.children()[0]; | |||
|
513 | iframe.width(svg.width.baseVal.value + 10); | |||
|
514 | iframe.height(svg.height.baseVal.value + 10); | |||
|
515 | ||||
|
516 | // Workaround needed by Firefox, to properly render svg inside iframes, | |||
|
517 | // see http://stackoverflow.com/questions/10177190/svg-dynamically-added-to-iframe-does-not-render-correctly | |||
|
518 | iframe.contents()[0].open(); | |||
|
519 | iframe.contents()[0].close(); | |||
|
520 | ||||
|
521 | // Insert the svg inside the iframe | |||
|
522 | var body = iframe.contents().find('body'); | |||
|
523 | body.html(wrapper.html()); | |||
|
524 | }); | |||
|
525 | ||||
|
526 | element.append(iframe); | |||
500 | }; |
|
527 | }; | |
501 |
|
528 | |||
502 |
|
529 |
General Comments 0
You need to be logged in to leave comments.
Login now