要在 html 页面中添加 svg 图形,通常使用对象标签将其包裹起来,如下所示:
<object id="svgid" data="mysvg.svg" type="image/svg+xml"
wmode="transparent" width="100" height="100">
this browser is not able to show SVG: <a linkindex="3"
href="http://getfirefox.com">http://getfirefox.com</a>
is free and does it!
If you use Internet Explorer, you can also get a plugin:
<a linkindex="4" href="http://www.adobe.com/svg/viewer/install/main.html">
http://www.adobe.com/svg/viewer/install/main.html</a>
</object>
如果在对象标签中不使用宽度和高度属性,则 svg 将以全尺寸显示。通常我从开放图形库获取 svg 文件进行测试。有没有办法使用 JavaScript 获取 svg 的大小?或者也许我应该查看 svg xml 文件以找出顶部 svg 标签的大小?
See http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2 http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2
只要 SVG 文件位于同一域中,就可以访问 HTML:object 引用的 SVG DOM(否则这将是一个安全漏洞。如果您的对象标签具有 id="myobj",您将执行以下操作:
var obj = document.getElementById("myobj"); // reference to the object tag
var svgdoc = obj.contentDocument; // reference to the SVG document
var svgelem = svgdoc.documentElement; // reference to the SVG element
然后你可以通过以下方式访问 svg 元素的宽度/高度:
svgelem.getAttribute("width")
svgelem.getAttribute("height")
请注意,这些属性可能是“100px”、“300”、“200em”、“40mm”、“100%”之类的内容,因此您需要仔细解析它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)