转换svg文本不透明度

时间:2012-04-13 06:59:53

标签: svg d3.js

转换SVG文本元素的不透明度有没有任何问题?我正在使用fill-opacity样式和stroke-opacity样式来淡化文本元素的存在和不存在。它在大多数浏览器上运行良好,但在Mac上的Chrome中根本不会转换 - 文本只是一次弹出或弹出。

除了填充不透明度和笔触不透明度之外,我尝试设置“不透明度”属性,这似乎确实可以使它工作,尽管现在我在转换运行之前和之后看到了一个奇怪的闪烁效果。就像它将opacity = 1设置为瞬间,然后将其设置为0然后转换为1。

另一个有趣的事情是,其他形状(圆形,矩形)可以很好地淡入和淡出,几乎与我在文本中使用的代码相同。

这对于特定的浏览器来说似乎很奇怪,但我想知道其他人对文本元素的不透明度的体验。是否有诀窍让它表现得一致?

2 个答案:

答案 0 :(得分:4)

您使用的是哪个版本的Chrome?我们在bug处理Chrome浏览器时发现了word cloud,但从19.0.1077.3 dev开始,它似乎已经修复。也许修复程序尚未进入您的特定版本?

就我而言,使用opacity暂时修复了问题。闪烁效应可能是由于指数符号未被解析为非常小的数字;您可以尝试使用1e-6代替0来解决此问题。

答案 1 :(得分:0)

对于我几个月前制作的动画,我切换了样式并使用了webkit-transitionvisibility: hidden。这似乎运作良好。如果这不起作用,您可以尝试转换到接近零的不透明度。