Я хотел бы прочитать в файле SVG, определить его ширину и высоту, чтобы масштабировать его. На данный момент мой код выглядит следующим образом:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "style/style.css";</style>
<meta name="svg.render.forceflash" content="false" />
<script src="svg.js" data-path="svgweb/src/"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"> </script>
<script type="text/javascript">
$(window).load(function() {
function loadContent(){
/* SVG */
var svg = document.getElementById('myimage')
/* Adapt size of SVG */
try {
SVGDoc = svg.contentDocument;
} catch (Err) {
SVGDoc = svg.getSVGDocument;
}
var root = SVGDoc.documentElement;
if (root.attributes['width'] != null) {
var width = root.attributes['width'].nodeValue;
width = width.substring(0, width.length - 2);
width = (width * 1.25);
var height = root.attributes['height'].nodeValue;
height = height.substring(0, height.length - 2);
height = (height * 1.25);
svg.width = width;
svg.height = height;
}
</script>
</head>
<body>
<div id="map">
<!--[if IE]>
<object id="myimage" src="images/myimage.svg" classid="image/svg+xml">
<![endif]-->
<!--[if !IE]>-->
<object id="myimage" data="images/myimage.svg" type="image/svg+xml">
<!--<![endif]-->
</object>
</div>
</body>
</html>
Этот код отлично работает в Firefox (хотя можно очень быстро увидеть изменение размера). Тем не менее, инструмент разработчика в Chrome nags: Uncaught TypeError: Невозможно прочитать свойство 'documentElement' из неопределенного для строки "var root = SVGDoc.documentElement;". Кроме того, Chrome не изменяет размер изображения.
Я не могу найти рабочее решение для обоих браузеров.