开发者社区> 浣熊干面包> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Firefox SVG getBBox方法返回'NS_ERROR_FAILURE'错误分析

简介:
+关注继续查看

在SVG中,我们无法给Text元素设置Width和Height属性,因此无法直接获取Text元素的高和宽。如果想要给Text元素添加背景色,最简单的办法就是在Text元素的下面添加Rect,然后给Rect设置fill属性。如下面的代码:

<rect id="dateRectObj_0" x="1133" y="605" rx="10" ry="10" width="120" height="23" fill="#B57A5A" display="block"/>
<text id="dateObj_0" x="1143" y="625" font-size="20" display="block">2014-09-11</text>

  显示效果 

  但是如果Text元素的字体改变了,如何修改Rect元素的Width和Height属性的值呢?一个简单的办法是通过Text元素的getBBox()方法获取高和宽,代码如下:

var textElement = d3.select("#dateObj_0");
var bBox = textElement.getBBox();
d3.select("#dateRectObj_0").attr("width", bBox.width).attr("height", bBox.height);

  有关d3.js的使用可以查看官网http://d3js.org/getBBox()方法返回指定元素的最小边界,http://www.w3.org/TR/SVG/types.html#InterfaceSVGLocatable

  不过在Firefox浏览器上,该方法偶尔会返回'NS_ERROR_FAILURE'的错误。原因是当目标元素的display属性被设置为'none'时,Firefox认为此时无法获取到元素的边界值(元素没有在浏览器中渲染,因此返回值没有任何意义)。不过经测试IE和Chrome浏览器能正常工作。解决的办法不外乎是在调用该方法前先判断目标元素的display属性是否为'none'。

 


本文转自Jaxu博客园博客,原文链接:http://www.cnblogs.com/jaxu/p/4193456.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java SPI 机制在 Flink 中的应用(源码分析)
我们在使用 Flink SQL 的时候是否有过这样的疑问? Flink 提供了各种各样的 connector 我们只需要在 DML 里面定义即可运行,那它是怎么找到要执行的代码呢? 它是怎么知道代码对应关系的呢? 其实 Flink 是通过 Java 的 SPI(并不是Flink发明创造的) 机制来实现的,下面就来深入源码分析一下其实现过程. 什么是 SPI ?
32 0
FindBugs Java 类 Date 属性 Getter/Setter 方法报错
FindBugs Java 类 Date 属性 Getter/Setter 方法报错
45 0
SAP Analytics Path Framework的filter实现原理分析
I am recently doing self study on Analytics Path Framework and as a beginner I have finished some “Hello world” exercise and I have written down my steps to finish those “Hello world” project in these two blogs:
23 0
SAP Analytics Path Framework的filter实现原理分析
SAP Analytics Path Framework的filter实现原理分析
33 0
SAP CRM Genil Text-for-Key-Codes vs SAP C4C只读字段
SAP CRM Genil Text-for-Key-Codes vs SAP C4C只读字段
29 0
SAP Analytics Path Framework的filter实现原理分析
SAP Analytics Path Framework的filter实现原理分析
36 0
基于AOP实现Ibatis的缓存配置过期策略
一、上篇回顾           自从上次《网站性能优化之应用程序缓存-中篇》得到不少园友的支持和鼓励,并且提出了不错的思路来实现我们中篇中提到的缓存策略,那么我将会结合.NET 本身内置 的AOP的方式来跟大伙讲述和共同分析下缓存策略的简单实现,那么我们通过配置文件或者自定义配置文件来完成缓存策略的配置。
838 0
941
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载