請問如何在懸停時更改此 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>謝謝。
uj5u.com熱心網友回復：
您需要更改on中的fill屬性。例如：pathsvga:hover
.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>uj5u.com熱心網友回復：
通過調整你的 svg，你可以獲得額外的樣式控制：
<path d="..." stroke="#cc662f" >
洗掉填充屬性。
<text fill="currentColor" x="50%" y="50%" text-anchor="middle">CTA</text>
fill="currentColor"：您的文本元素將繼承其父級的文本顏色。
這樣，您還可以在懸停時更改文本顏色。此外，您甚至不需要選擇<path>元素：
顯示代碼片段
.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>進一步閱讀： 如何更改 svg 元素的顏色？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/410805.html
標籤：