如果svg隐藏在单独的类中,则SVG LinearGradient隐藏 [英] SVG LinearGradient hidden if svg is hidden in seperate class
问题描述
基本上,如果svg隐藏在parallell元素中,则将隐藏linearGradient填充
Basically what Is happening is the linearGradient fill is hidden if the svg is hidden in a parallell element
.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>
如您在上面的代码段中所见,SVG元素在那里,linearGradient填充被隐藏
as you can see in the snippet above, the SVG element is there, the linearGradient fill is hidden
如果我将填充更改为CSS中的纯色集,则可以按预期工作,这似乎只在渐变填充中发生
If I change the fill to a solid colour set in my CSS it works as expected, this only seems to happen with gradient fills
现在这只是我整个问题的一个基本示例,我想避免重新创建SVG,因为我在Vue中使用了它,并创建了可重用的svg组件
now this is just a basic example of my overall issue, I want to avoid recreating the SVG since I am using this in Vue and have created a reusable svg component
推荐答案
为渐变选择其他ID:
.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="grad2" 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(#grad2)" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
或者如果两个SVG中使用的渐变相同,则仅考虑一个渐变(相关信息:使用SVG符号隐藏的渐变)
Or consider only one gradient if it's the same used in both SVG (related: Gradients hidden using SVG symbols)
.mobile {
display: none;
}
.content-svg {
border: 1px solid black;
}
<div class="desktop">
<!-- stuff here -->
</div>
<svg height="0" width="0">
<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>
</svg>
<div class="mobile">
<svg class="mobile-svg" height="150" width="400">
<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">
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
重复相同的ID是无效的,并且两个渐变仅考虑第一个,并且由于第一个具有display:none
,因此不会渲染.
Repeating the same ID is invalid and only the first one will be considered for both gradients and since the first one has display:none
it will not render.
更改顺序将使您的代码正常工作,因为第一个不再具有display:none
Changing the order will make your code work because the first one will no more have display:none
.mobile {
display: none;
}
.content-svg {
border: 1px solid black;
}
<div class="desktop">
<!-- stuff here -->
</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>
<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>
这篇关于如果svg隐藏在单独的类中,则SVG LinearGradient隐藏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!