在 CSS 中設置 SVG 顏色以覆蓋整個背景
[英]Setting SVG color in CSS to cover the whole background
問題描述
我有一組 SVG 格式的社交媒體圖標，我使用 2em 的高度和寬度屬性。 但我的背景顏色不是白色。 我一直認為這不是問題，直到我嘗試通過設置 SVG 的背景顏色來解決問題。 由於某種原因，SVG的背景不是整個SVG，而是它的一部分。 您可以在片段中看到它。 也許它與 SVG viewBox='0 0 24 24'屬性有關。 是否可以設置背景以匹配 2em x 2em - 就像我設置的 SVG 的大小一樣？
沒有白色背景，SVG 看起來不太漂亮。
更新：與初始版本相比，我對代碼進行了一些更改。 現在看起來像這樣：
body {background: rgba(78, 192, 253, .7);}.tg:before { content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath fill='white' d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z'/%3E%3Cpath d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Zm-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'/%3E%3C/svg%3E"); vertical-align: middle; padding-right: 0.25em; background-color: #fff;}.soc { padding: 0.5em; }
<fieldset class="fs01"> <legend><a href="https://t.me/grolribasi" class="soc tg" target="_blank">@Grolribasi</a></legend> <p class="soc">Text goes here</p> </fieldset>
2 個解決方案
解決方案1
1 已采納 2020-04-30 12:21:56
解決您的問題的一種可能方法是向 svg 元素添加一條白色填充路徑，如下所示：
body {background: rgba(78, 192, 253, .7);}.soc:before { content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath fill='white' d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z'/%3E%3Cpath d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Zm-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'/%3E%3C/svg%3E"); vertical-align: middle; padding-right: 0.25em; }
<body> <a href="https://t.me/grolribasi" class="soc tg" target="_blank">tg</a><br> <a href="https://t.me/grolribasi" class="soc" target="_blank">tg</a><br> </body>
為了獲得正確的路徑，我使用代碼中 d 屬性的第一部分（從開頭到第一個 m 命令）。
解釋：這是我用作背景的 SVG。
<svg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <path fill="white" d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z'/> <path d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z m-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'></svg>
原始路徑，您在代碼中擁有的路徑是有洞的。 這就是您可以看到藍色背景的原因。 如果你需要平原是白色的，你需要在洞后面使用一些白色的東西。 通常一個矩形會做，但你給了圓角路徑，如果你使用的是矩形，你會看到白色的角落。
在我的代碼中，我采用路徑的 d 屬性的第一部分，並使用它來繪制具有相同形狀的白色路徑並將其放在孔后面。
接下來，您需要對其進行編碼。 最簡單的方法是使用這個 svg 編碼器： https://codepen.io/yoksel/pen/JDqvs
解決方案2
-1 2020-04-30 10:36:21
您在鏈接中插入的 SVG 沒有默認大小，您可以將它們添加到元素並控制其大小，以設置 svg 背景。
body {background: rgba(78, 192, 253, .7);}.soc { width: 32px; height: 32px; background: white; display: inline-block; border-radius: 8px; }.soc:before { content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath id='telegram-3' d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Zm-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'/%3E%3C/svg%3E"); vertical-align: middle; padding-right: 0.25em; }
<body> <a href="https://t.me/grolribasi" class="tg" target="_blank"><i class="soc"></i>tg</a><br> <a href="https://t.me/grolribasi" target="_blank"><i class="soc"></i>tg</a><br> </body>
SVG中的圖案圖片的cssAssatioRatio，例如css背景圖片封面
[英]preserveAspectRatio of pattern image in SVG like css background-image cover
CSS：設置background-size：cover屬性覆蓋div而不是整個屏幕
[英]CSS: Set background-size: cover property to cover div instead of whole screen
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.