为啥我的 SVG 径向渐变在基于 Chrome 的浏览器中没有显示,但在 Firefox 中显示?

Posted

技术标签:

【中文标题】为啥我的 SVG 径向渐变在基于 Chrome 的浏览器中没有显示,但在 Firefox 中显示?【英文标题】:Why is my SVG's radialGradient NOT showing in Chrome based browsers, but does in Firefox?为什么我的 SVG 径向渐变在基于 Chrome 的浏览器中没有显示,但在 Firefox 中显示? 【发布时间】:2021-05-17 20:45:21 【问题描述】:

问题

下面省略号的<radialGradient> 不会在基于 Chrome 的浏览器中显示,但会显示其他内容。而 Firefox 会同时显示两者。

我阅读了this page, 和this page,,他们提供的线索表明这是一个radialGradient 问题,但我没有像第一页那样处理任何外部文件,也没有尝试像另一页那样的锥形渐变。

目标

我希望我的第一个 <svg> 标记仅限于 <defs>,因此我可以稍后参考部分以减小文件大小并保持干净。为了摆脱空白,我在第一个 <svg> 标签中添加了style="display: none;"

我尝试了什么

完成上述操作后,我会添加我的其他<svg>(电子邮件、短信等) 以多次引用它们。同样,带有 defs 的第一个空白 svg 不显示 (这很好)<path>、省略号等在 Firefox 中会显示正常,但在 Chrome 中不会显示。

只有当我从第一个 svg 中删除 style="display: none;" 时,省略号才会在 Chrome 中显示,即使它们在同一个元素中。

当我注意到它可能是<radialGradient> 问题时,我将fill:yellow;stroke:purple;stroke-width:2 添加到我的椭圆样式属性中,这使得椭圆以该样式显示,所以我知道椭圆在那里,但渐变不会显示在里面。

任何人都知道为什么<radialGradient> 不会出现在基于 Chrome 的浏览器中,而 style="display: none;" 在第一个 svg 上?或者有没有人有任何解决方法来解决这个问题/更有效地做到这一点???我知道我可以将所有内容放在 1 个 svg 中,但我需要将它们全部分开,以便我可以更轻松地使用 css 设置它们的样式,因为它们都是图标。

谢谢!

<!DOCTYPE html>
<html>
  <body>


    <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="display:none;"
        >

          <defs>

            <symbol id="ellipsesymbol" viewBox="0 0 126 76">
              <radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(62.5,0,0,37.5,62.5069,37.5066)">
                <stop offset="0" style="stop-color:#000;stop-opacity:0.5"/>
                <stop offset="0.62" style="stop-color:#170725;stop-opacity:0.58"/>
                <stop offset="0.82" style="stop-color:#4e187f;stop-opacity:0.78"/>
                <stop offset="1" style="stop-color:#8a2be2;stop-opacity:1"/>
              </radialGradient>
              <ellipse cx="62.5" cy="37.839" rx="62.5" ry="37.5" style="fill:url(#_Radial1);" />
            </symbol>

            <symbol id="emailsymbol" viewBox="0 0 126 76">
              <path
              d="M31.15,17.125l0,40.763l62.713,0l0,-40.763l-62.713,-0Zm36.687,24.928c-1.411,1.411 -3.292,2.195 -5.33,2.195c-2.038,0 -3.92,-0.784 -5.331,-2.195l-21.792,-21.792l54.089,-0l-21.636,21.792Zm-17.402,-4.546l-16.149,16.148l0,-32.297l16.149,16.149Zm1.097,1.097l4.547,4.547c1.724,1.724 4.076,2.665 6.428,2.665c2.508,0 4.703,-0.941 6.428,-2.665l4.547,-4.547l16.148,16.149l-54.246,-0l16.148,-16.149Zm23.047,-1.097l16.149,-16.149l-0,32.454l-16.149,-16.305Z"
              style="fill:#00bfff;fill-rule:nonzero;"/>
            </symbol>

            <symbol id="SMSsymbol" viewBox="0 0 126 76">
              <path d="M98.587,27.064c0,-4.29 -3.483,-7.773 -7.773,-7.773l-56.464,0c-4.29,0 -7.773,3.483 -7.773,7.773l0,15.546c0,4.29 3.483,7.773 7.773,7.773l15.631,0l-9.002,13.326l19.803,-13.326l30.032,0c4.29,0 7.773,-3.483 7.773,-7.773l0,-15.546Z"
              style="fill:#00bfff;"/>
              <text x="36.276px" y="42.521px" style="font-family:'KnightsTemplar', 'Knights Templar';font-size:25.665px;">SMS</text>
            </symbol>

            <!-- .... -->

          </defs>
    </svg>


    <svg id="emailgroup">
      <use xlink:href="#ellipsesymbol" />
      <use xlink:href="#emailsymbol" />
    </svg>


    <svg id="smsgroup">
      <use xlink:href="#ellipsesymbol" />
      <use xlink:href="#SMSsymbol" />
    </svg>


    <!-- more svg's.... -->


  </body>
</html>

【问题讨论】:

您已经知道解决方法了,不是吗,即停止使用 display:none; 那么它的效率非常低,我必须多次复制/粘贴相同的代码。同样,问题基本上是“为什么 X 在 Chrome 中没有按应有的方式工作?” 您不需要复制代码 - 只需将 SVG 元素从可见画布上移开,就像这样,因为 display:none 从那时起关闭所有 CSS 并且 Chrome 尚未实现 SVG 2 样式使用元素呢。 您可以使用width="0" height="0" 隐藏第一个SVG,而不是display:none。然后它可以在 Chrome 中运行。 谢谢Sphinxxx。好主意 :) 如果您想要积分,请将其作为答案。 【参考方案1】:

您可以使用width="0" height="0" 隐藏第一个SVG,而不是display:none。然后它可以在 Chrome 中运行:

<svg xmlns="http://www.w3.org/2000/svg"  >
    <defs>
        <symbol id="ellipsesymbol" viewBox="0 0 126 76">
            <radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(62.5,0,0,37.5,62.5069,37.5066)">
                <stop offset="0" style="stop-color:#000;stop-opacity:0.5"/>
                <stop offset="0.62" style="stop-color:#170725;stop-opacity:0.58"/>
                <stop offset="0.82" style="stop-color:#4e187f;stop-opacity:0.78"/>
                <stop offset="1" style="stop-color:#8a2be2;stop-opacity:1"/>
            </radialGradient>
            <ellipse cx="62.5" cy="37.839" rx="62.5" ry="37.5" style="fill:url(#_Radial1);" />
        </symbol>

        <symbol id="emailsymbol" viewBox="0 0 126 76">
            <path d="M31.15,17.125l0,40.763l62.713,0l0,-40.763l-62.713,-0Zm36.687,24.928c-1.411,1.411 -3.292,2.195 -5.33,2.195c-2.038,0 -3.92,-0.784 -5.331,-2.195l-21.792,-21.792l54.089,-0l-21.636,21.792Zm-17.402,-4.546l-16.149,16.148l0,-32.297l16.149,16.149Zm1.097,1.097l4.547,4.547c1.724,1.724 4.076,2.665 6.428,2.665c2.508,0 4.703,-0.941 6.428,-2.665l4.547,-4.547l16.148,16.149l-54.246,-0l16.148,-16.149Zm23.047,-1.097l16.149,-16.149l-0,32.454l-16.149,-16.305Z"
                  style="fill:#00bfff;fill-rule:nonzero;"/>
        </symbol>

        <symbol id="SMSsymbol" viewBox="0 0 126 76">
            <path d="M98.587,27.064c0,-4.29 -3.483,-7.773 -7.773,-7.773l-56.464,0c-4.29,0 -7.773,3.483 -7.773,7.773l0,15.546c0,4.29 3.483,7.773 7.773,7.773l15.631,0l-9.002,13.326l19.803,-13.326l30.032,0c4.29,0 7.773,-3.483 7.773,-7.773l0,-15.546Z"
                  style="fill:#00bfff;"/>
            <text x="36.276px" y="42.521px" style="font-family:'KnightsTemplar', 'Knights Templar';font-size:25.665px;">SMS</text>
        </symbol>
    </defs>
</svg>

<svg id="emailgroup">
    <use href="#ellipsesymbol" />
    <use href="#emailsymbol" />
</svg>

<svg id="smsgroup">
    <use href="#ellipsesymbol" />
    <use href="#SMSsymbol" />
</svg>

还要注意 xlink:href 已被弃用,您现在可以简单地使用 href:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href

【讨论】:

以上是关于为啥我的 SVG 径向渐变在基于 Chrome 的浏览器中没有显示,但在 Firefox 中显示?的主要内容,如果未能解决你的问题,请参考以下文章

是否可以使用当前的 MDN 画布 2D API 函数在 userSpaceOnUse 坐标中使用 gradientTransforms 渲染 SVG 径向渐变?

如何给SVG填充和描边应用线性渐变

Chrome(基于 webkit 的浏览器)的 SVG sprite 中未显示 defs 中的渐变

SVG渐变

为啥这个 SVG 中的渐变显示为黑色?

SVG 基础教程