【发布时间】：2020-02-11 14:10:59
【问题描述】：
如果 svg 隐藏在平行元素中，基本上发生的情况是线性渐变填充被隐藏
.mobile {
display: none;
}
.content-svg {
border: 1px solid black;
}<div class="desktop">
<!-- stuff here -->
</div>
<div class="mobile">
<svg class="mobile-svg" height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
<div class="content">
<svg class="content-svg" height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>
</div>正如你在上面的 sn-p 中看到的，SVG 元素在那里，线性渐变填充是隐藏的
如果我将填充更改为我的 CSS 中设置的纯色，它会按预期工作，这似乎只发生在渐变填充中
现在这只是我的整体问题的一个基本示例，我想避免重新创建 SVG，因为我在 Vue 中使用它并创建了一个可重用的 svg 组件
【问题讨论】：
-
不要对两个不同的渐变使用相同的 ID，实际上只考虑第一个并且它有 display:none
-
@TemaniAfif 正如我所说，这个 svg 在我的应用程序中被多次重用，将 ID 更改为类似乎也不能解决问题
-
不是一个类，另一个 ID ... 检查这个：jsfiddle.net/gvda0myo .. 更改顺序修复问题，因为考虑的是第一个没有显示的问题：无。您有义务使用不同的 ID 或只保留一个渐变，您放入可见的 SVG 中
-
@TemaniAfif 这不会使 svg 非常有用，但我无法重新订购移动部分和内容部分
-
在这种情况下，在另一个 SVG 中定义渐变，在该 SVG 中您将只有 defs，并使该 svg 的高度和宽度为 0（无显示：无）.. 使用的渐变必须在 SVG 内不显示：无