SVG一般可以嵌入到html下,通过iframe的形式,但是嵌入后的svg文件只有知道自己所在窗口的大小才能做到自适应。因为脚本同源问题,在跨域时在SVG内部通过脚本是无法获取到iframe对象的。即如果html和svg不是属于同一个域名下,相互之间是不能通过脚本进行操作的。
但是在SVG里面通过window.innerWidth可以获取到宽度,window.innerHeight可以获取到高度,经过测试,这个大小刚好就是iframe的大小,并且虽则浏览器大小的改变,这个大小也是动态改变,因此不需要通过获取iframe元素就可以做到获取iframe大小了。在SVG脚本里获得自己所在的窗口大小,那么怎么做自适应不就很简单了吗?SVG编辑可以使用“图也SVG编辑平台”,免费的SVG编辑工具,有大量的免费图库下载,并有svg组态实例,下载地址:http://www.svgsvg.com。
以下是html内容:存储为fittest.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">
<title>Untitledfile</title>
</head>
<body>
<iframeid="a" src="fittest.svg" width="300"height="400"/>
</body>
</html>
这是SVG文本内容,打开记事本,存储为fittest.svg即可;
<?xml version="1.0"encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTDSVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg width="640" height="480" version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<scripttype="text/javascript">
<![CDATA[
functionclick(evt)
{
alert(window.innerWidth);
alert(window.innerHeight);
}
]]>
</script>
</defs>
<rect x="0" y="0"οnclick=" click (evt)" width="155" height="97"fill="#9999CC" stroke="#000000" />
</svg>