出于某種原因，: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>uj5u.com熱心網友回復：
我們需要在這里打破遞回，使整個事情無效。即在問題的版本中，剪輯路徑指向一個<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>uj5u.com熱心網友回復：
在你的情況下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>uj5u.com熱心網友回復：
我注意到如果你在 Firefox 中打開開發者工具，你會看到你有一個shadow-root (closed)而在 Chrome 中你沒有。這可能就是你的:hover偽類沒有執行的原因。
https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode
uj5u.com熱心網友回復：
正如@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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355508.html