SVG

Question

出于某种原因，: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>

Answer 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>

Answer 2

我注意到，如果您在 Firefox 中打开开发者工具，您会看到 shadow-root (closed) 而在 Chrome 中则没有。这可能就是为什么你的 :hover Pseudo-class 没有执行的原因。

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

Answer 3

我们需要在此处打破使整个事情无效的递归。 IE。在问题的版本中，剪辑路径指向一个 <use> 元素，该元素指向一个 <path>，该元素具有一个指向 <use> 的剪辑路径，该 <use> 指向一个 [=12] =]...

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

另一种方法是用 <path> 指向的副本替换 <use> 元素，并从该路径副本中删除剪辑路径，然后再次修复无限递归问题。

<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>

Answer 4

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

本质上，你是在自己剪裁一个 svg 路径（三角形）（......仍然需要自己定义） - 导致与 'unclipped' 版本完全相同的形状。

但是，由于您已经使用了 <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>

SVG – :hover 和链接不能与 clip-path 和 Firefox 结合使用

SVG – :hover and links are not working in combination with clip-path and Firefox

css

firefox

pseudo-class