悬停时更改 SVG 中的填充颜色答案

【问题标题】：Change fill color in a SVG when hover悬停时更改 SVG 中的填充颜色
【发布时间】：2022-01-13 04:17:48
【问题描述】：

请问如何在悬停时更改此 SVG 按钮的填充颜色？

我尝试过的 CSS 规则：

.svg-button:hover {
  fill: #cc662f;
  transition: 0.3s;
}

<p class="svg-button">
  <a href="" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" width="325" height="50"><g data-name="Composant 18 – 1"><g data-name="Groupe 129"><g data-name="Rectangle 6"><g data-name="Groupe 126"><g data-name="Groupe 125"><path data-name="Tracé 9925" d="M29.12 3.476c44.518 0 44.518-2.754 89.037-2.754s44.52 1.14 89.041 1.14 44.522 2.981 89.042 2.981c15.382 0 28.872 7.712 28.872 19.862h-2.353c0 12.15-11.138 24.2-26.519 24.2-44.519 0-44.519-4.563-89.037-4.563s-44.521 3.767-89.042 3.767-44.521.385-89.041.385c-15.381 0-27.1-11.644-27.1-23.794h-.571C1.445 12.555 13.739 3.476 29.12 3.476Z" fill="none" stroke="#cc662f"/></g></g></g><g data-name="Rectangle 6"><g data-name="Groupe 128"><g data-name="Groupe 127"><path data-name="Tracé 9926" d="M296.492 45.934c-44.519 0-44.519 2.754-89.037 2.754s-44.522-1.139-89.042-1.139-44.52-2.982-89.041-2.982C13.99 44.567.5 36.855.5 24.705h2.352c0-12.15 11.138-24.2 26.52-24.2 44.518 0 44.518 4.563 89.037 4.563s44.521-3.766 89.041-3.766 44.522-.386 89.042-.386c15.382 0 27.1 11.644 27.1 23.794h.571c.005 12.145-12.289 21.224-27.671 21.224Z" fill="none" stroke="#cc662f"/></g></g></g></g><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">CTA</text></g></svg>
  </a>
</p>

谢谢。

【问题讨论】：

我认为问题出在您的选择器上，乍一看，我没有看到任何带有 svg-button 类的元素。尝试选择您想要填充的 svg 元素，例如 sag g 或给组路径一个类，然后使用类选择器或其他东西

标签： html css svg

【解决方案1】：

您需要更改a:hover 上svg 中path 的fill 属性。比如：

.svg-button a:hover svg path { 
     fill: #cc662f;
     transition: 0.3s;
}

<p class="svg-button">
    <a href="" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="325" height="50"><g data-name="Composant 18 – 1"><g data-name="Groupe 129"><g data-name="Rectangle 6"><g data-name="Groupe 126"><g data-name="Groupe 125"><path data-name="Tracé 9925" d="M29.12 3.476c44.518 0 44.518-2.754 89.037-2.754s44.52 1.14 89.041 1.14 44.522 2.981 89.042 2.981c15.382 0 28.872 7.712 28.872 19.862h-2.353c0 12.15-11.138 24.2-26.519 24.2-44.519 0-44.519-4.563-89.037-4.563s-44.521 3.767-89.042 3.767-44.521.385-89.041.385c-15.381 0-27.1-11.644-27.1-23.794h-.571C1.445 12.555 13.739 3.476 29.12 3.476Z" fill="none" stroke="#cc662f"/></g></g></g><g data-name="Rectangle 6"><g data-name="Groupe 128"><g data-name="Groupe 127"><path data-name="Tracé 9926" d="M296.492 45.934c-44.519 0-44.519 2.754-89.037 2.754s-44.522-1.139-89.042-1.139-44.52-2.982-89.041-2.982C13.99 44.567.5 36.855.5 24.705h2.352c0-12.15 11.138-24.2 26.52-24.2 44.518 0 44.518 4.563 89.037 4.563s44.521-3.766 89.041-3.766 44.522-.386 89.042-.386c15.382 0 27.1 11.644 27.1 23.794h.571c.005 12.145-12.289 21.224-27.671 21.224Z" fill="none" stroke="#cc662f"/></g></g></g></g><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">CTA</text></g></svg>
    </a>
</p>

但我宁愿将类分配给链接。让a 充当按钮，p 标记作为文本段落执行其预期功能。

.svg-button:hover path { 
     fill: #cc662f;
     transition: 0.3s;
}

<p>
    <a class="svg-button" href="" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="325" height="50"><g data-name="Composant 18 – 1"><g data-name="Groupe 129"><g data-name="Rectangle 6"><g data-name="Groupe 126"><g data-name="Groupe 125"><path data-name="Tracé 9925" d="M29.12 3.476c44.518 0 44.518-2.754 89.037-2.754s44.52 1.14 89.041 1.14 44.522 2.981 89.042 2.981c15.382 0 28.872 7.712 28.872 19.862h-2.353c0 12.15-11.138 24.2-26.519 24.2-44.519 0-44.519-4.563-89.037-4.563s-44.521 3.767-89.042 3.767-44.521.385-89.041.385c-15.381 0-27.1-11.644-27.1-23.794h-.571C1.445 12.555 13.739 3.476 29.12 3.476Z" fill="none" stroke="#cc662f"/></g></g></g><g data-name="Rectangle 6"><g data-name="Groupe 128"><g data-name="Groupe 127"><path data-name="Tracé 9926" d="M296.492 45.934c-44.519 0-44.519 2.754-89.037 2.754s-44.522-1.139-89.042-1.139-44.52-2.982-89.041-2.982C13.99 44.567.5 36.855.5 24.705h2.352c0-12.15 11.138-24.2 26.52-24.2 44.518 0 44.518 4.563 89.037 4.563s44.521-3.766 89.041-3.766 44.522-.386 89.042-.386c15.382 0 27.1 11.644 27.1 23.794h.571c.005 12.145-12.289 21.224-27.671 21.224Z" fill="none" stroke="#cc662f"/></g></g></g></g><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">CTA</text></g></svg>
    </a>
</p>

【讨论】：

【解决方案2】：

通过调整您的 svg，您可以获得额外的样式控制：

<path d="..." stroke="#cc662f" >

移除填充属性。

<text fill="currentColor" x="50%" y="50%" text-anchor="middle">CTA</text>

fill="currentColor"：您的文本元素将继承其父级的文本颜色。

这样您还可以在悬停时更改文本颜色。此外，您甚至不需要选择<path>elements：

.svg-button {
  fill: none;
  color: #333;
  stroke: "#cc662f";
}

a:hover .svg-button {
  fill: #cc662f;
  color: #fff;
  font-weight: bold;
  transition: 0.3s;
}

<p>
  <a class="a-svg-button" href="#" target="_blank">
    <svg class="svg-button" xmlns="http://www.w3.org/2000/svg" width="325" height="50">
      <g data-name="Composant 18 – 1">
        <g data-name="Groupe 129">
          <g data-name="Rectangle 6">
            <g data-name="Groupe 126">
              <g data-name="Groupe 125">
                <path data-name="Tracé 9925" d="M29.12 3.476c44.518 0 44.518-2.754 89.037-2.754s44.52 1.14 89.041 1.14 44.522 2.981 89.042 2.981c15.382 0 28.872 7.712 28.872 19.862h-2.353c0 12.15-11.138 24.2-26.519 24.2-44.519 0-44.519-4.563-89.037-4.563s-44.521 3.767-89.042 3.767-44.521.385-89.041.385c-15.381 0-27.1-11.644-27.1-23.794h-.571C1.445 12.555 13.739 3.476 29.12 3.476Z" stroke="#cc662f" />
              </g>
            </g>
          </g>
          <g data-name="Rectangle 6">
            <g data-name="Groupe 128">
              <g data-name="Groupe 127">
                <path data-name="Tracé 9926" d="M296.492 45.934c-44.519 0-44.519 2.754-89.037 2.754s-44.522-1.139-89.042-1.139-44.52-2.982-89.041-2.982C13.99 44.567.5 36.855.5 24.705h2.352c0-12.15 11.138-24.2 26.52-24.2 44.518 0 44.518 4.563 89.037 4.563s44.521-3.766 89.041-3.766 44.522-.386 89.042-.386c15.382 0 27.1 11.644 27.1 23.794h.571c.005 12.145-12.289 21.224-27.671 21.224Z" stroke="#cc662f" />
              </g>
            </g>
          </g>
        </g><text fill="currentColor" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">CTA</text>
      </g>
    </svg>
  </a>
</p>

延伸阅读： How to change the color of an svg element?

【讨论】：