55
rated 0 times
[
56]
[
1]
/ answers: 1 / hits: 41591
/ 12 Years ago, mon, june 11, 2012, 12:00:00
I'm trying to modify an svg tag with javascript to make it resizable, but my changes have no effect. The reason that I need to do this is that this tag is rendered by a library that I can't modify, and thus it seems like my only choice is to modify the svg with javascript.
I know that the tag that this script produces is correct since I am able to copy the tag to a new html document and it will work (I have included it in the sample code), so it seems like I need some way to force the svg to recognize that it has been changed (or another way to modify the svg).
Here's a HTML page that shows my problem:
<html>
<head>
<script src=http://code.jquery.com/jquery.min.js></script>
<script type=text/javascript>
$(document).ready(function () {
var svg = $('#testsvg').find('svg')[0];
var w = svg.getAttribute('width').replace('px', '');
var h = svg.getAttribute('height').replace('px', '');
svg.removeAttribute('width');
svg.removeAttribute('height');
svg.setAttribute('viewbox', '0 0 ' + w + ' ' + h);
svg.setAttribute('preserveaspectratio', 'xminymin meet')
$(svg)
.css('width', '100%')
.css('height', '100%')
.css('background-color', 'white');
});
</script>
</head>
<body style=background-color: #333;>
<div style=width: 80%; height: 40%;>
<svg id=resultsvg xmlns=http://www.w3.org/2000/svg version=1.1 style=width: 100%; height: 100%; background-color: white; viewbox=0 0 100 100 preserveaspectratio=xminymin meet>
<circle cx=50 cy=50 r=40 stroke=black stroke-width=2 fill=red></circle>
</svg>
</div>
<div id=testsvg style=width: 80%; height: 40%;>
<svg xmlns=http://www.w3.org/2000/svg version=1.1 width=100px height=100px>
<circle cx=50 cy=50 r=40 stroke=black stroke-width=2 fill=red />
</svg>
</div>
</body>
</html>
More From » jquery
