SVG 在頂部矩形邊框描邊后隱藏溢出

Question

如何在這個 SVG 中隱藏溢出的紅色？ 我嘗試用筆划在矩形之前移動它，但它沒有幫助。

這是代碼和屏幕截圖。

 <br><br> <svg _ngcontent-fdl-c107="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xml:space="preserve" style="max-width: 100%;" id="15875450744052" height="34"> <g _ngcontent-fdl-c107="" id="canvas1-group2"> <rect _ngcontent-fdl-c107="" stroke="null" x="2" y="2" id="15875450744052-wan-rate-3fa119cb-0555-4094-a0a6-33a8ac11b772-DOWN" width="0.4%" fill="red" height="30" rx="15" ry="15"></rect> <rect _ngcontent-fdl-c107="" stroke-width="2" fill="" fill-opacity="1" x="1" y="1" id="15875450744052-isp-speed-3fa119cb-0555-4094-a0a6-33a8ac11b772-DOWN" stroke="#D4D4D4" width="99%" height="32" rx="15" ry="15" style=" overflow: hidden; background: red; padding: 20px; fill: transparent; stroke: 20; "></rect> <text _ngcontent-fdl-c107="" x="31%" y="20" font-family="Verdana" font-size="12px" fill="#222222"> 4.0 </text> <text _ngcontent-fdl-c107="" x="64%" y="20" font-family="Verdana" font-size="12px" fill="#222222"> 16.2 </text> <text _ngcontent-fdl-c107="" x="90%" y="20" font-family="Verdana" font-size="12px" fill="#222222"> 81 </text> </g> </svg>

Answer 1

我已將大圓角矩形移動到 clipPath 中，並將該 clipPath 應用於紅色矩形。

然后，我使用<use>元素來渲染現在位於 clipPath 中的原始矩形。

 <br><br> <svg _ngcontent-fdl-c107="" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xml:space="preserve" style="max-width: 100%;" id="15875450744052" height="34"> <g _ngcontent-fdl-c107="" id="canvas1-group2"> <clipPath id="cp"> <rect id="r" _ngcontent-fdl-c107="" stroke-width="2" fill="" fill-opacity="1" x="1" y="1" id="15875450744052-isp-speed-3fa119cb-0555-4094-a0a6-33a8ac11b772-DOWN" stroke="#D4D4D4" width="99%" height="32" rx="15" ry="15" style=" overflow: hidden; background: red; padding: 20px; fill: transparent; stroke: 20; "></rect> </clipPath> <rect _ngcontent-fdl-c107="" stroke="null" x="2" y="2" id="15875450744052-wan-rate-3fa119cb-0555-4094-a0a6-33a8ac11b772-DOWN" width="0.4%" fill="red" height="30" rx="15" ry="15" clip-path="url(#cp)"></rect> <use xlink:href="#r"/> <text _ngcontent-fdl-c107="" x="31%" y="20" font-family="Verdana" font-size="12px" fill="#222222"> 4.0 </text> <text _ngcontent-fdl-c107="" x="64%" y="20" font-family="Verdana" font-size="12px" fill="#222222"> 16.2 </text> <text _ngcontent-fdl-c107="" x="90%" y="20" font-family="Verdana" font-size="12px" fill="#222222"> 81 </text> </g> </svg>