【问题标题】:SVG z-order with opacity < 1不透明度 < 1 的 SVG z 顺序
【发布时间】:2012-09-02 07:32:33
【问题描述】:

我正在构建一个 SVG 图像(树形图,用椭圆表示节点),我想将椭圆与线条连接起来,但我希望线条从椭圆的 边缘 开始。由于计算边缘落在哪里以及确切地开始或结束线条非常困难,我正在从椭圆的中心绘制线条并寻找一种方法将椭圆叠加在线条上,以便它掩盖重叠部分,使线条看起来只从椭圆的边缘开始。因为 SVG 通过元素顺序实现 z 顺序,所以如果我先创建连接线,然后创建椭圆,则可以,除了 ...

...我希望椭圆为蓝色或红色,填充不透明度 =“0.15”,但是当我这样做时,线条会显示出来。当然,低不透明度的东西不能完全掩盖它所覆盖的东西是有道理的,但我很难弄清楚如何才能获得我想要的效果。我找到了一个可行的解决方案:对于我想要的每个椭圆,我首先创建一个大小和位置相同的椭圆,白色填充和不透明度为 1,并在它们重叠的地方完全遮盖连接线。然后我将我真正想要渲染的椭圆叠加在白色椭圆上,填充蓝色或红色,不透明度为 0.15。这看起来是我想要的样子,但感觉很笨拙。有没有我忽略的优雅解决方案?

【问题讨论】:

  • 这听起来很笨拙。为什么需要半透明背景?您是否需要通过节点显示其他元素或背景?或者你只需​​要颜色?

标签: svg opacity z-order


【解决方案1】:

您可以使用剪辑或蒙版。

一直画线,但将它们剪到除椭圆之外的所有地方。

http://www.w3.org/TR/SVG/masking.html

【讨论】:

    【解决方案2】:

    您需要在将fill-opacity 渲染为白色背景后获取颜色。

    截取您的 SVG 屏幕截图,在 Photoshop 等图形编辑程序中打开它,使用吸管工具检查渲染颜色并复制十六进制值。然后用fill-opacity="1"作为填充颜色

    【讨论】:

      猜你喜欢
      • 2011-12-29
      • 1970-01-01
      • 1970-01-01
      • 2016-10-12
      • 2013-05-28
      • 2010-12-22
      • 2017-10-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多