SVG – :hover 和 links 不能与 clip-path 和 Firefox 结合使用答案

【问题标题】：SVG – :hover and links are not working in combination with clip-path and FirefoxSVG – :hover 和 links 不能与 clip-path 和 Firefox 结合使用
【发布时间】：2021-12-23 08:55:37
【问题描述】：

由于某种原因，:hover 和链接在 Firefox 中无法与 clip-path 结合使用。用 Chrome 没问题。我需要clip-path 才能工作。我知道它可以在没有属性的情况下工作。但是，我不能删除此属性。

知道为什么吗？

简化示例：

<svg xmlns="http://www.w3.org/2000/svg" height="210" width="400">
  <style>
    path {
      fill: blue;
    }

    path:hover {
      fill: red;
    }
  </style>
  <a target="_parent" href="/test">
    <path id="triangle" clip-path="url('#triangle-clip')" d="M150 0 L75 200 L225 200 Z">
      <title>Triangle</title>
    </path>
  </a>
  <clipPath id="triangle-clip">
    <use href="#triangle" />
  </clipPath>
</svg>

【问题讨论】：

标签： css svg firefox pseudo-class

【解决方案1】：

在你的情况下，clip-path 什么都不做，所以我只是删除了它。并且添加@namespace 很重要。

@namespace svg url(http://www.w3.org/2000/svg);
svg|a path {
    fill: blue;
}

svg|a:hover path {
    fill: red;
}

<svg xmlns="http://www.w3.org/2000/svg" height="210" width="400">
  <a href="/test">
    <path id="triangle" d="M150 0 L75 200 L225 200 Z">
      <title>Triangle</title>
    </path>
  </a> 
</svg>

【讨论】：

谢谢，但不幸的是，这并不能解决我的问题。在我的示例中，clip-path 什么都不做，因为它是一个简化的示例。我知道如果我删除此属性，它会起作用。但我需要这个来处理这个属性。而且我认为我不需要为我的样式指定命名空间，因为它们位于 svg 标签内。

【解决方案2】：

我注意到，如果你在 Firefox 中打开开发者工具，你会看到你有一个 shadow-root (closed)，而在 Chrome 中你没有。这可能是您的 :hover 伪类没有执行的原因。

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode

【讨论】：

谢谢。嗯...我在 Firefox 中根本看不到影子 DOM（启用了可见性）。在 Chrome 中有一个但里面有一个空元素：<slot name="user-agent-default-slot"></slot>。我不认为这是问题所在。你呢？
@Mark-S 好吧，<use> 元素是在 Firefox 中使用 shadow DOM 实现的，但这不是问题。
@RobertLongson 啊，现在我明白了。我看错了位置。谢谢:)

【解决方案3】：

我们需要在这里打破使整个事情无效的递归。 IE。在问题的版本中，剪辑路径指向一个<use> 元素，该元素指向一个<path>，该元素的剪辑路径指向一个指向<use> 的<use>，它指向一个<path>...

这是一种方法，即当它是 <a> 元素的后代时，仅将剪辑路径应用于路径。 <use> 元素忽略了这一点，因为选择器跨越了影子 DOM 边界。

另一种方法是将<use> 元素替换为其指向的<path> 的副本，并从该路径副本中删除剪辑路径，从而再次解决无限递归问题。

<svg xmlns="http://www.w3.org/2000/svg" height="210" width="400">
  <style>
    path {
      fill: blue;
    }

    path:hover {
      fill: red;
    }
    a > path {
      clip-path: url('#triangle-clip');
    }
  </style>
  <a target="_parent" href="/test">
    <path id="triangle" d="M150 0 L75 200 L225 200 Z">
      <title>Triangle</title>
    </path>
  </a>
  <clipPath id="triangle-clip">
    <use href="#triangle" />
  </clipPath>
</svg>

【讨论】：

【解决方案4】：

正如@Robert Longson 指出的，您的初始代码存在递归问题。

本质上，您正在自己剪切一个 svg 路径（三角形）（...仍然必须自己定义）——导致与“未剪切”版本完全相同的形状。

但是，由于您已经使用了 <use> 元素，因此重新排序路径和剪切路径定义（避免不必要的递归）可能仍会简化您应用的代码。

<svg xmlns="http://www.w3.org/2000/svg" height="210" width="400">
  <clipPath id="triangle-clip">
    <path id="triangle-path" d="M150 0 L75 200 L225 200 Z" />
  </clipPath>
  <style>
    .link-content {
      fill: blue;
        clip-path: url('#triangle-clip');
    }
    a:hover .link-content{
      fill: red;
    }
  </style>
  <a class="link" target="_parent" href="/test">
    <title>Triangle</title>
    <use class="link-content" href="#triangle-path" />
  </a>
</svg>

【讨论】：