【问题标题】:SVG code not displayed on ChromeSVG 代码未显示在 Chrome 上
【发布时间】:2014-11-25 21:50:35
【问题描述】:

我有以下 HTML 代码来显示 SVG 图标。在 FF 中它显示得很好,但在 Chrome 中它根本不显示。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
version="1.1" id="Layer_1" x="0px" y="0px" width="" height="" viewBox="0 0 100 100"  
style="enable-background:new 0 0 100 100;" xml:space="preserve" class="svg replaced-svg" 
preserveAspectRatio="xMinYMin meet">
   <path style="fill:#010101;" d="M93.262,75C97.547,67.639,100,59.131,100,50c0-27.612-22.388-50-50-50S0,22.388,0,50s22.388,50,50,50  c13.807,0,26.307-5.591,35.352-14.648l-8.85-8.85C69.715,83.301,60.34,87.5,50,87.5c-20.679,0-37.5-16.821-37.5-37.5  S29.321,12.5,50,12.5S87.5,29.321,87.5,50c0,4.443-0.854,8.691-2.283,12.646L85.119,62.5H75V25.135H50c-13.807,0-25,11.193-25,25  c0,13.806,11.193,25,25,25c5.737,0,10.962-2.015,15.186-5.262C67.456,72.9,70.923,75,75,75H93.262z M62.5,43.774v6.36  c0,6.896-5.615,12.5-12.5,12.5s-12.5-5.604-12.5-12.5c0-6.897,5.615-12.5,12.5-12.5h12.5V43.774z">
</path>
</svg>

有人可以帮我解决这个问题吗?

【问题讨论】:

  • 以上代码在我的 chrome 中运行良好。例如,它真的是所有代码还是您将其包含在另一个 HTML 文件中?

标签: html google-chrome svg


【解决方案1】:

我通过使用 css 样式将高度和宽度设置为 100% 解决了这个问题:

svg
{
  height:100%;
  width:100%;
}

【讨论】:

    【解决方案2】:

    如果有人想知道,上面代码的问题是它有空的宽度和高度值,你需要:

    • 输入有效的widthheight

    • 从 SVG 中移除 width=""height=""

    这就是它不在 Chrome 或 Chromium 中显示的原因。

    【讨论】:

      【解决方案3】:

      在css文件中,添加这个类:

      svg {z-index: 999;position: relative;}
      

      一切都会好的!

      【讨论】:

        猜你喜欢
        • 2014-08-30
        • 2012-06-27
        • 2017-07-07
        • 2019-02-08
        • 2021-10-11
        • 2021-03-26
        • 2021-12-24
        • 1970-01-01
        • 2013-04-11
        相关资源
        最近更新 更多