2

There are files SVG that contain header information of the height and width in mm.

<?xml  version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Creator: CorelDRAW X6 -->
<svg xmlns="http://www.w3.org/2000/svg"  width="50.8mm"  height="55.0332mm"   version="1.1"   viewBox="0 0 5080 5503" />

I show these images through an object

<div id="panel">
      <object id="svg" class="group" data="none.svg" width="500" height="500"></object>        
</div>

var svg = document.getElementById('svg');
svg.setAttribute('data', 'one.svg');

However, in some browsers, it appears not true. To solve this problem, I need to replace the height and width, assign them a value of 100%

How to change a string using Javascript ?

width="50.8mm"  height="55.0332mm"

to

width="100%"  height="100%"

thank you

1 Answer 1

2

In your svg tag width and height are attributes, so you may simply write:

svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');

in the same way you set / change the data attribute.

Edited:

Try to load (or reload) the svg data attribute at a later time, eg:

var svg = document.getElementById('svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
setTimeout(function(){svg.setAttribute('data', 'one.svg');},0);

Edited #2:

If I understood correctly, you have specific size set in your svg file. Then, you should edit it. If you need to do it at runtime by JS, you could try this script:

var container = document.getElementById('svg');
var innerDoc = container.contentDocument;
var svg = innerDoc.getElementsByTagName('svg')[0];
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
2
  • No, unfortunately it changes the size of the container <object>, but not the image inside it.
    – ruslan.ry
    Nov 18, 2014 at 10:43
  • Edited my answer, please try Nov 18, 2014 at 11:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.