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"onclick=" click (evt)" width="155" height="97"fill="#9999CC" stroke="#000000" />
</svg>
扫一扫
2604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
