對這篇文章充滿熱情，我嘗試將漸變剪輯路徑應用于我相對簡單的形狀（一個 O 字母轉換為曲線）。
它在 Firefox 下完美運行，但是一旦我在 webkit 下嘗試它，我就什么也看不到。
我試圖修復它，我把它分成簡單的部分，用我的 Amit Sheen 代碼嘗試，唯一讓它失敗的是使用我的路徑而不是他的路徑。如果我不使用clipPath，路徑會按預期呈現，但是一旦我剪輯它，它就會消失。我無法弄清楚問題是什么。
你能幫助我嗎？
.gradient {
width: 157px;
height: 157px;
background: linear-gradient(90deg, rgba(6,94,115,0.7959383582534576) 0%, rgba(207,241,255,1) 100%);
border-radius: 50%;
}<svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
<clipPath id="clip">
<path d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
</clipPath>
<foreignObject x="470" y="150" width="157" height="157" clip-path="url(#clip)">
<div class="gradient" xmlns="http://www.w3.org/1999/xhtml"></div>
</foreignObject>
</svg>uj5u.com熱心網友回復：
您可能需要轉換路徑，使其左上角落在 (0,0) 點上。這在 chrome 中是必需的，但在 Firefox 中不起作用，除非異物具有 x="0" y="0"。出于這個原因，我沒有將 ax 和 y 屬性賦予外來物件，而是將其轉換為所需的點。
svg{background:silver}<svg viewBox="0 0 1000 400">
<foreignObject width="157" height="157" transform="translate(471,151)" clip-path="url(#clip)">
<div style="height:100%;background:gold"> </div>
</foreignObject>
<clipPath id="clip">
<path id="p" transform="translate(-471,-151)" d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
</clipPath>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323284.html