[英]Issue with linear gradient on svg text
I am trying to put a linear gradient on svg text, but I'm not sure how to specify the fill color in the text class.我试图在 svg 文本上添加线性渐变,但我不确定如何在文本类中指定填充颜色。 While learning how to do this, I found an example on the web so I'm using that, but where I specify fill color for the text (in the sfp2 class defined below), I put fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/> but the text no longer shows up on screen at all.
在学习如何做到这一点时,我在网上找到了一个例子,所以我正在使用它,但是在我为文本指定填充颜色的地方(在下面定义的 sfp2 类中),我把 fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/> 但文本根本不再显示在屏幕上。
<div class="logo">
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="green"/>
<stop offset="95%" stop-color="gold"/>
</linearGradient>
</defs>
<style>
.sfp2 {
font-family: CamphorW01-Regular, sans-serif;
font-size: 7px;
/*fill: rgb(71,164,71);*/
fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/>
}
.sfp9 {
font-family: CamphorW01-Thin, sans-serif;
font-size: 25px;
fill: rgb(117,163,126);
kerning="40";
}
</style>
<text x="0" y="25" class="sfp9" kerning="40">MainLogo</text>
<text x="24" y="33" class="sfp2">Tag Line</text>
</svg>
</div>
My questions are: what am I doing wrong in the sfp2 class, and can we use linear-gradient instead when it's svg text?我的问题是:我在 sfp2 类中做错了什么,当它是 svg 文本时,我们可以使用线性渐变吗?
Please try this:请试试这个:
<div class="logo"> <svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="5%" stop-color="green"/> <stop offset="95%" stop-color="gold"/> </linearGradient> </defs> <style> .sfp2 { font-family: CamphorW01-Regular, sans-serif; font-size: 7px; /*fill: rgb(71,164,71);*/ fill:url(#MyGradient); } .sfp9 { font-family: CamphorW01-Thin, sans-serif; font-size: 25px; fill: rgb(117,163,126); kerning="40"; } </style> <text x="0" y="25" class="sfp9" kerning="40">MainLogo</text> <text id="test" x="24" y="33" class="sfp2">Tag Line</text> </svg> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.