gpt4 book ai didi

css - svg 文本上的线性渐变问题

转载 作者:行者123 更新时间:2023-11-28 09:42:53 25 4
gpt4 key购买 nike

我想在 svg 文本上添加线性渐变,但我不确定如何在文本类中指定填充颜色。在学习如何执行此操作时,我在网上找到了一个示例,所以我正在使用它,但是在我为文本指定填充颜色的地方(在下面定义的 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>

我的问题是:我在 sfp2 类中做错了什么,当它是 svg 文本时我们可以使用线性渐变代替吗?

最佳答案

请试试这个:

<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>

关于css - svg 文本上的线性渐变问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52356677/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com