Question

我正在研究SVG蓝图，我遇到了一些问题。

我认为这个问题的出现是因为我必须对两个半透明元素进行分组，这样当它们重叠时，就好像它们是一个固体单元一样。

Here is an MCVE, which should be viewed in Chrome since I didn't use "absolute" values for one element's transform-origin.

leftRoomFill.style.fill = '#fff';
leftRoomDoorFill.style.fill = '#fff';
leftRoomFill.style.opacity = '1';
leftRoomDoorFill.style.opacity = '1';
console.log(window.getComputedStyle(leftRoomFill).opacity);
console.log(window.getComputedStyle(leftRoomDoorFill).opacity);

问题在于，即使它正在登录控制台，元素的不透明度设置为1，看起来元素的不透明度根本不会改变，仍然为0.

我尝试过以下内容，进一步巩固了我的观点，即这个问题是一个不透明的问题。

rightRoomFill.style.zIndex = '1';
leftRoomFill.style.zIndex = '2';
leftRoomDoorFill.style.zIndex = '2';

有人知道为什么上面的代码看似没有任何影响吗？

我要做的是使用门填充元件来裁剪门延伸到的房间的填充物。

我知道我可以简单地取消填充元素并使用没有不透明度的颜色，但我真的希望保持能够使用半透明填充的灵活性。

有什么想法吗？

Answer 1

目前还不清楚你在问什么。为什么你认为房间的不透明度为0？它们在Chrome中变得可见（绿色）。所以＆＃34; 1＆＃34;的价值对我来说似乎是对的。应该发生的事情不是吗？

重新提出zIndex问题：您可能不得不使用其他方法。 z-index目前不适用于SVG元素。它已被添加到SVG 2中，但我认为任何浏览器都不支持它。

Answer 2

zIndex属性不会重新排列SVG元素（至少现在还没有）。

好像你想要从一个左室组织填充门＃34;覆盖＆＃34;将鼠标放在右侧房间的右侧楼层。但是，您希望这样做只有门填充的单个副本，在这种情况下，该门填充与该门打开的地板（即左侧地板）组合在一起。您似乎不想在<defs>部分中创建主门填充，然后使用<use>元素多次复制它。虽然我不确定这是最好的策略，但如果你真的想这样做，一种方法是将当前可见的地板（即被割掉的地板）移动到SVG地板堆栈的可见底部，即到地板的父节点的代码顶部。您可以使用以下代码执行此操作：只有在特定楼层被鼠标悬停时才会运行：myFloorNode.parentNode.insertBefore(myFloorNode, myFloorNode.parentNode.firstChild);。然后任何其他门填充重叠的地板将覆盖＆＃34;它，＆＃34;切断＆＃34;那一节。

我发现这种方法有点混乱的是它需要不断地改变你的地板元素。这不一定是致命的。然而它确实让我有点不安，因为如果重新洗牌变得更加复杂，它可能会造成一些混乱。它还要求您将门填充设置为完全不透明，这可能是也可能是不可接受的。无论如何，这只是我的直觉，并且将取决于你究竟如何实现它。

您可以通过修改代码来执行此策略的简单实现，如下所示：

function setFillOpacity(){
  this.style.opacity = '0.5';

  // *** add the following line:
  this.parentNode.insertBefore(this, this.parentNode.firstChild);

  if (this.id === 'right-room-fill'){...

但是，请注意，只有这一次更改，有时您的门填充似乎在＆＃34;关闭＆＃34;即使门行程在＆＃34;打开＆＃34;位置。它似乎最终会自行解决，通过关闭门然后重新打开的动态动画结束打开。但是，我认为您必须处理代码以确保门填充启动在正确的位置。我会把这个问题留给你解决。

使用组的子元素剪辑或覆盖其他元素

2 个答案: