不遵守CSS選擇器規則的SVG停止顏色的懸停效果-有解無憂

我嘗試在帶有 SVG 的鏈接上添加懸停效果作為孩子。當鏈接懸停時，我想更改 svg 的停止顏色。

.link但是現在，當我懸停第一個元素時，所有 SVG 圖示都會更改停止顏色。如果我懸停第二個或第三個.link元素，停止顏色不會改變。如何在 svg 組件中不添加額外的類或 js 來解決這個問題？

問題：不遵守 CSS 選擇器規則的 SVG 停止顏色的懸停效果

懸停第一個：不遵守 CSS 選擇器規則的 SVG 停止顏色的懸停效果

懸停第二個：不遵守 CSS 選擇器規則的 SVG 停止顏色的懸停效果

代碼筆示例

該類使用 scss 定義，如下所示：

.link {
  & defs stop:first-child {
    stop-color: #393896;
  }
  & defs stop:last-child {
    stop-color: #181735;
  }
  &:hover defs stop:first-child {
    stop-color: #ffbbcc;
  }
  &:hover defs stop:last-child {
    stop-color: #0000ff;
  }
  &:hover {
    background-color: red; // test to see if the css selector is working
  }
}

SVG：

<svg width="1em" height="1em" viewBox="0 0 84 115" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M41.977 0.397949C19.37 0.397949 0.869995 18.323 0.869995 40.242C0.869995 70.122 41.977 114.232 41.977 114.232C41.977 114.232 83.084 70.121 83.084 40.242C83.084 18.323 64.585 0.397949 41.977 0.397949ZM41.977 54.4689C40.0722 54.5265 38.1752 54.2011 36.3984 53.5119C34.6217 52.8227 33.0015 51.7838 31.6337 50.4568C30.266 49.1297 29.1786 47.5416 28.436 45.7865C27.6935 44.0315 27.3108 42.1452 27.3108 40.2394C27.3108 38.3337 27.6935 36.4474 28.436 34.6924C29.1786 32.9373 30.266 31.3492 31.6337 30.0221C33.0015 28.6951 34.6217 27.6562 36.3984 26.967C38.1752 26.2778 40.0722 25.9524 41.977 26.0099C43.8818 25.9524 45.7788 26.2778 47.5555 26.967C49.3323 27.6562 50.9525 28.6951 52.3203 30.0221C53.688 31.3492 54.7754 32.9373 55.518 34.6924C56.2605 36.4474 56.6431 38.3337 56.6431 40.2394C56.6431 42.1452 56.2605 44.0315 55.518 45.7865C54.7754 47.5416 53.688 49.1297 52.3203 50.4568C50.9525 51.7838 49.3323 52.8227 47.5555 53.5119C45.7788 54.2011 43.8818 54.5265 41.977 54.4689" fill="url(#paint0_linear_1_4257)" />
  <defs>
    <linearGradient id="paint0_linear_1_4257" x1="41.977" y1="0.397949" x2="41.977" y2="114.232" gradientUnits="userSpaceOnUse">
      <stop stop-color="currentColor" />
      <stop offset="1" stop-color="currentColor" />
    </linearGradient>
  </defs>
</svg>

html結構如下所示：

<div id="main">
  <a class="link">
    <svg ...  />
  </a>
  <a class="link">
    <svg ... />
  </a>
</div>

我希望有一個解決方案也適用scss module于反應專案。謝謝

uj5u.com熱心網友回復：

查看您的 CodePen，您似乎為第二個復制了相同的 SVG 元素。因此，兩個元素都具有相同id的元素屬性值linearGradient：paint0_linear_1_4257. 這可能會導致 SVG 出現一些古怪的行為。

我猜路徑的填充指令（它以 id 作為引數）正在觸發第一個懸停事件的所有匹配 id，在頁面上有多個匹配 id 時有些古怪，不會導致任何那些復制的鏈接發生這種情況后。

最簡單的修復方法是確保頁面上的所有 id 都是唯一的。我將第一個 id 重命名為paint0_linear_1_4257_1，第二個重命名為paint0_linear_1_4257_2，包括更新填充指令中的相應值，這似乎已經解決了我的問題。

uj5u.com熱心網友回復：

您可以使用CSS 自定義屬性（變數）來更改顏色。這有點棘手，因為您不應該重復使用 ID（您的初始行內 SVG 元素具有兩次定義的相同 linearGradient）。因此，我使用該<symbol>元素并將 linearGradient 放置在其中。現在可以重復使用相同的符號，并且可以使用 currentColor 或 CSS 變數來更改顏色。

.link {
  color: red;
}

.link svg {
  width: 4em;
  height: 4em;
  --stop01: currentColor;
  --stop02: currentColor;
}

.link:hover svg {
  --stop01: #ffbbcc;
  --stop02: #0000ff;
}

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <symbol id="marker" viewBox="0 0 84 115">
    <path d="M41.977 0.397949C19.37 0.397949 0.869995 18.323 0.869995 40.242C0.869995 70.122 41.977 114.232 41.977 114.232C41.977 114.232 83.084 70.121 83.084 40.242C83.084 18.323 64.585 0.397949 41.977 0.397949ZM41.977 54.4689C40.0722 54.5265 38.1752 54.2011 36.3984 53.5119C34.6217 52.8227 33.0015 51.7838 31.6337 50.4568C30.266 49.1297 29.1786 47.5416 28.436 45.7865C27.6935 44.0315 27.3108 42.1452 27.3108 40.2394C27.3108 38.3337 27.6935 36.4474 28.436 34.6924C29.1786 32.9373 30.266 31.3492 31.6337 30.0221C33.0015 28.6951 34.6217 27.6562 36.3984 26.967C38.1752 26.2778 40.0722 25.9524 41.977 26.0099C43.8818 25.9524 45.7788 26.2778 47.5555 26.967C49.3323 27.6562 50.9525 28.6951 52.3203 30.0221C53.688 31.3492 54.7754 32.9373 55.518 34.6924C56.2605 36.4474 56.6431 38.3337 56.6431 40.2394C56.6431 42.1452 56.2605 44.0315 55.518 45.7865C54.7754 47.5416 53.688 49.1297 52.3203 50.4568C50.9525 51.7838 49.3323 52.8227 47.5555 53.5119C45.7788 54.2011 43.8818 54.5265 41.977 54.4689" fill="url(#paint0)" />
    <defs>
      <linearGradient id="paint0" x1="41.977" y1="0.397949" x2="41.977" y2="114.232" gradientUnits="userSpaceOnUse">
        <stop style="stop-color: var(--stop01)" />
        <stop offset="1" style="stop-color: var(--stop02)" />
      </linearGradient>
    </defs>
  </symbol>
</svg>

<div id="main">
  <a class="link">
    <svg xmlns="http://www.w3.org/2000/svg">
      <use href="#marker"/>
    </svg>
  </a>
  <a class="link">
    <svg xmlns="http://www.w3.org/2000/svg">
      <use href="#marker"/>
    </svg>
  </a>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/492513.html

標籤：css 反应 svg 粗鲁的 CSS 模块

上一篇：如何以編程方式在openStreetMap上繪制SVG多邊形

下一篇：正則運算式從字串中的特定SVG元素中洗掉屬性