0

Taking for example the iframe in

http://dahlström.net/svg/html/get-embedded-svg-document-script.html

How to get the dimensions of the svg in there?

I want to scale the svg to the dimensions of the iframe, if the svg is larger than the iframe dimensions.

Bill2022
  • 29
  • 9
  • 1
    have you tried setting `max-width:100%; max-height:100%` on the SVG element itself? – Mike 'Pomax' Kamermans Feb 10 '23 at 06:23
  • I will try that. But it would be better if I could get the actual dimensions, too, as I need to work on them later on. The actual svg-files are not created by me, I only use them. – Bill2022 Feb 10 '23 at 06:31
  • I solved it for my case. I will post the working solution sometimes later. – Bill2022 Feb 10 '23 at 09:36
  • if you control the content of the iframe, you can always set up a postMessage communication channel between it and the parent, so that the parent can go "hey can you tell me what size that file is?" and have the iframe run the code that checks the dimensions and postMessages the answer back to the parent. – Mike 'Pomax' Kamermans Feb 10 '23 at 16:55
  • 1
    Why an IFRAME, load it in shadowDOM in your main HTML document: [```` Web Component](https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd) – Danny '365CSI' Engelman Feb 11 '23 at 04:52
  • @Danny'365CSI'Engelman I currently try to find out which sort to load the svg is best for my usecase: Currently it is loading in the iframe and in an object. I might add the custom element way, too, you linked. - Actually I'm writing this to say TY for a working custom element example! This is offtopic, I know: From your daily experience, do you think custom elements are that much standard, that I could use them without risk to exclude many users? (First thing I'll do is creating a custom span element, that I use to replace some old unpleasent `a`-javascript elements) – Bill2022 Feb 16 '23 at 16:59
  • @Danny'365CSI'Engelman In your given link's code example it says: `declare default connectedCallback as sync so await can be used`. Should this be "async" instead of "sync"? – Bill2022 Feb 16 '23 at 18:28
  • Yes, that is a typo. And the Custom Elements API is a native API supported in all modern browsers. For my view see: https://stackoverflow.com/questions/64304353/main-differences-between-lit-element-react/64307820#64307820 – Danny '365CSI' Engelman Feb 16 '23 at 18:48

1 Answers1

0

I'm currently using this solution. Not optimal, but working for my needs.

iframe.onload = continueOnLoadOfSvgInStdIframe;
iframe.src = url;
function continueOnLoadOfSvgInStdIframe() {
    var svg = iframe.contentDocument;
    var docEl  = svg.documentElement;
    if (typeof docEl.width==='undefined') { return; }
    var w = docEl.width.baseVal.value;
    var h = docEl.height.baseVal.value;
    docEl.setAttribute("viewBox", "0 0 "+w+ " "+h); 
    docEl.setAttribute("width",iframe.clientWidth);
    docEl.setAttribute("height",iframe.clientHeight);
}
Bill2022
  • 29
  • 9