为什么我的 SVG 的 radialGradient 不显示在基于 Chrome 的浏览器中，但在 Firefox 中显示？
Why is my SVG's radialGradient NOT showing in Chrome based browsers, but does in Firefox?
问题
我的 <radialGradient> 下面的省略号不会在基于 Chrome 的浏览器中显示，但会显示其他内容。而 firefox 会显示两者。
我读了 this page, and ，他们提供了线索表明这是一个径向渐变问题，但我没有像第一页那样处理任何外部文件，也没有像另一页那样尝试圆锥形渐变。
目标
我希望我的第一个 <svg> 标签严格只用于 <defs>，这样我可以稍后参考部分以减少文件大小，并保持它的干净。为了去掉空白 space，我在第一个 <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>
您可以使用 width="0" height="0" 隐藏第一个 SVG，而不是 display:none。然后它在 Chrome:
中工作
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<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
问题
我的 <radialGradient> 下面的省略号不会在基于 Chrome 的浏览器中显示，但会显示其他内容。而 firefox 会显示两者。
我读了 this page, and
目标
我希望我的第一个 <svg> 标签严格只用于 <defs>，这样我可以稍后参考部分以减少文件大小，并保持它的干净。为了去掉空白 space，我在第一个 <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>
您可以使用 width="0" height="0" 隐藏第一个 SVG，而不是 display:none。然后它在 Chrome:
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<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