防止圖標的 SVG 背景出血？

Question

目標是防止 SVG 圖標的背景溢出，以便它們可以顯示為獨立文件。 對類似問題的許多答案建議在 SVG 元素周圍放置一個 DIV 或其他容器以防止出血，但目標是使 SVG 圖標獨立，而不依賴於容器。

將rect元素添加為背景元素並不能可靠地工作，因為此方法會因某些視口縱橫比而中斷。

這可能嗎？

注意：要查看漏洞，您必須下載並在瀏覽器中打開 SVG 文件。 使用 JSFiddle/CodePen 隱藏了問題，因為這些站點將 SVG 封裝在一個容器中（這解決了出血問題）。

在此處下載 SVG： https://gofile.io/?c=eKzjk7

示例 SVG：

 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255, 120, 50)" style="background-color: rgb(255, 255, 102); border-radius: 0%"> <path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/> </svg>

理想output：

實際 output：

Answer 1

使用漸變並禁用重復以避免這種情況：

 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255, 120, 50)" style="background:linear-gradient(rgb(255, 255, 102),rgb(255, 255, 102)) no-repeat; border-radius: 0%"> <path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/> </svg>

我不知道該如何解釋，但它的行為與從html到 canvas 的背景傳播相同

問題示例

 html { width:50px; height:50px; background-color:red; }

用漸變固定

 html { width:50px; height:50px; background:linear-gradient(red,red) no-repeat; }

由於存在傳播，因此border-radius不會產生任何影響，因此一個想法是使用radial-gradient ：

 html { width:50px; height:50px; background:radial-gradient(farthest-side,red 97%,transparent 100%) no-repeat; }

如果您想要任何類型的border-radius ，這是另一個具有更多背景層的想法：

 html { --r:25px; /* adjust this to control the Radius (Max value = width/2) */ --c:red; width:100px; height:100px; background: radial-gradient(farthest-side at bottom left,var(--c) 97%,transparent 100%) top right /var(--r) var(--r), radial-gradient(farthest-side at top right,var(--c) 97%,transparent 100%) bottom left /var(--r) var(--r), radial-gradient(farthest-side at top left,var(--c) 97%,transparent 100%) bottom right /var(--r) var(--r), radial-gradient(farthest-side at bottom right,var(--c) 97%,transparent 100%) top left /var(--r) var(--r), linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--r)) 100%, linear-gradient(var(--c),var(--c)) center/100% calc(100% - 2*var(--r)); background-repeat:no-repeat; }

對於非矩形圖標：

 html { --rx:40px; /* adjust this to control the X Radius (Max value = width/2) */ --ry:75px; /* adjust this to control the Y Radius (Max value = height/2) */ --c:red; width:100px; height:150px; background: radial-gradient(farthest-side at bottom left,var(--c) 97%,transparent 100%) top right /var(--rx) var(--ry), radial-gradient(farthest-side at top right,var(--c) 97%,transparent 100%) bottom left /var(--rx) var(--ry), radial-gradient(farthest-side at top left,var(--c) 97%,transparent 100%) bottom right /var(--rx) var(--ry), radial-gradient(farthest-side at bottom right,var(--c) 97%,transparent 100%) top left /var(--rx) var(--ry), linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--rx)) 100%, linear-gradient(var(--c),var(--c)) center/100% calc(100% - 2*var(--ry)); background-repeat:no-repeat; }

如果您還想模擬background-clip / background-origin ，那就更花哨了

 html { --p:15px; /* offset from the edges*/ --rx:35px; /* Max value = width/2 - var(--p)*/ --ry:25px; /* Max value = height/2 - var(--p)*/ --c:red; width:120px; height:100px; background: radial-gradient(farthest-side at bottom left,var(--c) 97%,transparent 100%) top var(--p) right var(--p)/var(--rx) var(--ry), radial-gradient(farthest-side at top right,var(--c) 97%,transparent 100%) bottom var(--p) left var(--p)/var(--rx) var(--ry), radial-gradient(farthest-side at top left,var(--c) 97%,transparent 100%) bottom var(--p) right var(--p)/var(--rx) var(--ry), radial-gradient(farthest-side at bottom right,var(--c) 97%,transparent 100%) top var(--p) left var(--p) /var(--rx) var(--ry), linear-gradient(var(--c),var(--c)) center/calc(100% - 2*(var(--p) + var(--rx))) calc(100% - 2*var(--p)), linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--p)) calc(100% - 2*(var(--p) + var(--ry))); background-repeat:no-repeat; }

Answer 2

我無法重現您遇到的問題。 當我插入svg時，一切對我來說都很好。 黃色背景只有圓圈那么大。 如果您可以提供 CodePen 或 JSFiddle 來解決您的問題，那就太好了。

這是你可以做的。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255, 120, 50)" style="background-color: rgb(255, 255, 102); border-radius: 0%; width: auto; height: auto;">

<path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/>

</svg>

請注意，我添加了

width: auto;
height: auto;

這將使背景與 svg 一樣大。 如果這不是您要查找的內容，請發表評論，以便我們解決問題。