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>