时间戳

首页 > 解决方案 > SVG – :hover 和 links 不能与 clip-path 和 Firefox 结合使用

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

问题描述

出于某种原因，:hover链接不能与clip-pathFirefox 结合使用。用 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>

标签： csssvgfirefoxpseudo-class

解决方案

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

<a>这是一种方法，即当它是元素的后代时，仅将剪辑路径应用于路径。这被<use>元素忽略了，因为选择器跨越了 shadow 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>

推荐阅读