Question 289701 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Html object tag for svg find width

I have

<object
   data="${content}"
   type="image/svg+xml"
></object>

Where content is a svg.

Currently i am trying to figure this on elm.

    object
        [ Attr.attribute "data" "${content}"
        , Attr.type_ "image/svg+xml"
        ]
        []

QUESTION:
how can i find the width of the svg?

I tried in elm on "load" but it does not fire.
Javascript or elm solution welcomed, but i prefer elm

I tried on elm

on "change" decodeImgLoad

or

on "load" decodeImgLoad

but they do not get called at all.

When i used img instead of object it worked, but i want to have the svg set up correctly on the dom and not just as image.

In elm i can not reference the svg directly, i need img or object or to convert it into elm svg.
(to convert it into elm svg is not possible, as the svg is large)

Tags:

2

Answers


  1. 0

    Okay first of all i know html and javascript not elm, so I’ll try to answer you question with javascript.

    Q = Find width of svg that is in an object tag.

    Ans = Use this js code

      var svg = document.getElementById('YourSVG');
  var get = svg.getBoundingClientRect();
  var width = get.width;
  var height = get.height;

    Hope this helps.

    Login or Signup to reply.
  2. 0

    First of all this needs to run from a webserver. Running it from the filesystem does not work. SVG document must have the same origin as the HTML document. If not, document will be null.

    Make sure that both the HTML document AND the SVG document has been loaded before starting to request the DOM. Here you have a simple example:

    HTML document

    <!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', e => {
        // call the object element by its id
        document.getElementById('object01').addEventListener('load', e => {
          let objectElm = e.target;
          let svgElm = objectElm.contentDocument.rootElement;
          console.log(svgElm.clientWidth, svgElm.clientHeight);
        });
      });
    </script>
  </head>
  <body>
    <object id="object01" data="svg.svg"></object>
  </body>
</html>

    SVG document (svg.svg)

    <?xml version="1.0" encoding="UTF-8" ?>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
   <circle id="c1" cx="100" cy="100" r="100" fill="Orange" />
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search