为什么屏幕上看不到svg,我该如何解决这个问题?

出于某种原因,svg是隐藏的,那么我如何将其取消隐藏?

如何使SVG在屏幕上可见?

代码https://jsfiddle.net/mv7ep9tn/

<div class="sc-bdfBwQ XXzWu">
        <div class="sc-bdfBwQ sc-gsTCUz cUWRuD bhdLno"><a target="_blank" rel="noopener" href="" aria-label="Testing twitter" class="sc-eCssSg lbrsth sc-fodVxV cYLuAZ"><svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="sc-gKsewC cVBMqs">
              <title>Testing</title>
              <path d="M8.1,21.034A12.717,12.717,0,0,1,1.23,19.019a.5.5,0,0,1,.329-.917,8.273,8.273,0,0,0,4.992-1,4.807,4.807,0,0,1-3.173-3.13.5.5,0,0,1,.348-.636A4.821,4.821,0,0,1,1.843,9.523a.548.548,0,0,1,.247-.458.506.506,0,0,1,.5-.034l.091.049A4.816,4.816,0,0,1,2.529,4a.507.507,0,0,1,.393-.247.5.5,0,0,1,.427.183,11.781,11.781,0,0,0,7.9,4.27c-.013-.144-.02-.289-.02-.435a4.81,4.81,0,0,1,8.116-3.493,8.157,8.157,0,0,0,2.32-.93.5.5,0,0,1,.73.583,4.781,4.781,0,0,1-.662,1.32c.191-.067.378-.143.563-.225a.5.5,0,0,1,.585.135.5.5,0,0,1,.034.6,9.2,9.2,0,0,1-2.057,2.2c0,.1,0,.208,0,.313A12.636,12.636,0,0,1,8.1,21.034ZM3.527,19.105a11.72,11.72,0,0,0,4.577.929A11.645,11.645,0,0,0,19.863,8.275c0-.179,0-.357-.012-.533a.5.5,0,0,1,.207-.43,8.181,8.181,0,0,0,.959-.81,9.068,9.068,0,0,1-.932.16.5.5,0,0,1-.316-.925,3.857,3.857,0,0,0,.977-.837,9.013,9.013,0,0,1-1.465.418.5.5,0,0,1-.461-.148,3.812,3.812,0,0,0-6.491,3.473.5.5,0,0,1-.1.434.489.489,0,0,1-.409.179A12.772,12.772,0,0,1,3.09,5.167,3.812,3.812,0,0,0,4.573,9.591a.5.5,0,0,1,.2.569.523.523,0,0,1-.491.347,4.772,4.772,0,0,1-1.36-.242A3.813,3.813,0,0,0,5.9,13.257a.5.5,0,0,1,.033.972,6.63,6.63,0,0,1-1.279.17,3.809,3.809,0,0,0,3.236,1.914.5.5,0,0,1,.3.894A9.081,9.081,0,0,1,3.527,19.105Z" fill="red"></path>
            </svg></a><a target="_blank" rel="noopener" href="" aria-label="Testing spotify" class="sc-eCssSg lbrsth sc-fodVxV cYLuAZ"><svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="sc-gKsewC cVBMqs">
              <title>Testing</title>
              <path d="M18,10.561a.494.494,0,0,1-.245-.065,15.2,15.2,0,0,0-10.95-1.55.5.5,0,0,1-.232-.973A16.2,16.2,0,0,1,18.25,9.626a.5.5,0,0,1-.247.935Z"></path>
              <path d="M16.646,13.632a.5.5,0,0,1-.249-.066,12.459,12.459,0,0,0-9.121-1.292.5.5,0,1,1-.237-.971A13.458,13.458,0,0,1,16.9,12.7a.5.5,0,0,1-.25.933Z"></path>
              <path d="M15.312,16.583a.5.5,0,0,1-.251-.068,9.777,9.777,0,0,0-7.295-1.033.5.5,0,0,1-.245-.97,10.768,10.768,0,0,1,8.043,1.139.5.5,0,0,1-.252.932Z"></path>
              <path d="M12,23A11,11,0,1,1,23,12,11.013,11.013,0,0,1,12,23ZM12,2A10,10,0,1,0,22,12,10.011,10.011,0,0,0,12,2Z"></path>
            </svg></a><a target="_blank" rel="noopener" href="" aria-label="Testing youtube" class="sc-eCssSg lbrsth sc-fodVxV cYLuAZ"><svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="sc-gKsewC cVBMqs">
              <title>Testing</title>
              <path d="M12,20.55c-.3,0-7.279-.006-9.115-.5A3.375,3.375,0,0,1,.5,17.665,29.809,29.809,0,0,1,0,12,29.824,29.824,0,0,1,.5,6.334,3.375,3.375,0,0,1,2.885,3.948c1.836-.492,8.819-.5,9.115-.5s7.279.006,9.115.5A3.384,3.384,0,0,1,23.5,6.334,29.97,29.97,0,0,1,24,12a29.97,29.97,0,0,1-.5,5.666,3.384,3.384,0,0,1-2.388,2.386C19.279,20.544,12.3,20.55,12,20.55Zm0-16.1c-.072,0-7.146.006-8.857.464A2.377,2.377,0,0,0,1.464,6.593,29.566,29.566,0,0,0,1,12a29.566,29.566,0,0,0,.464,5.407,2.377,2.377,0,0,0,1.679,1.679c1.711.458,8.785.464,8.857.464s7.146-.006,8.857-.464a2.377,2.377,0,0,0,1.679-1.679A29.66,29.66,0,0,0,23,12a29.66,29.66,0,0,0-.464-5.407h0a2.377,2.377,0,0,0-1.679-1.679C19.146,4.456,12.071,4.45,12,4.45ZM9.7,15.95a.5.5,0,0,1-.5-.5V8.55a.5.5,0,0,1,.75-.433l5.975,3.45a.5.5,0,0,1,0,.866L9.95,15.883A.5.5,0,0,1,9.7,15.95Zm.5-6.534v5.168L14.675,12Z" fill="red"></path>
            </svg></a></div>
      </div>
    </div>

推荐答案

您只需通过任意一个宽度高度属性向SVG添加宽度和高度,如下所示:

<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="sc-gKsewC cVBMqs" width="24" height="24">

width="24" height="24"

或者,您也可以使用一个CSS类来设置宽度和高度.本例使用的是TailWind类.

<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" class="sc-gKsewC cVBMqs w-6 h-6">

w-6 h-6

viewbox属性为您提供有关宽度和高度viewBox="0 0 24 24"的提示.

下面是关于viewbox的更多背景故事以及这些值的含义.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

Html相关问答推荐

新用户登录时无法从cookie中获取当前用户信息

在FlexBox中将div拉伸到父div的完全高度

图像不在HTML文件中显示

如何生成随机字符串的字母数字字符集长度到html跨度?

为什么 Select 元素在带有数据绑定的Blazor上行为怪异?

阴影部分内部的ionic Select 元素

如何将tmap按钮和图例更改为位于页脚后面?

当我们在vue中使用截断大文本时如何显示标题属性?

在选项标签中如何添加Django模板的条件

白色栏超出页面100%的右侧

当悬停时,同时影响相邻的两侧div

主要元素内滚动时,固定导航栏会消失

css 网格创建空行和列

奇怪的幻影 div 命名为

如何动态调整彼此重叠的两个 div 的大小,使它们在增长时保持相同的高度

增加第一个字母的大小不再正确居中文本

无法使用 flexbox 裁剪图像

防止按钮溢出到新行

CSS 变量不适用于自定义属性回退值

我的卡片内容无法在 bootstrap 5 中正确居中