Question

我正在尝试在svg中创建渐变，但我没有成功。这是我的代码：

<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <symbol id="bottomwave">    
<svg viewBox="0 0 50 50" preserveAspectRatio="none" >
    <g>
    <path fill="#009de1" d="M 27 4.125C 21 6.125 14 11 0 11L 0 13.9962L 54 14L 54 0C 40 0 33 2.125 27 4.125Z"></path>
    </g>
</svg>
  </symbol>
</svg>

结合这个：

<svg class="homepage-wave-bottom" style="width: 100%; height: 250px" fill="url(#gradient)">
  <defs>
    <linearGradient id="gradient">
        <stop offset="0%"  stop-color="#102b72"/>
        <stop offset="100%" stop-color="#009de1"/>
    </linearGradient>
  </defs>

  <use xlink:href="#bottomwave"/>

</svg>

小提琴：https://jsfiddle.net/jotect8j/1/

Answer 1

我通过在＆＃34; bottomwave＆＃34;中定义渐变来实现这一点。 svg，这是使用渐变填充，并将路径填充设置为该渐变：

＆＃13;

<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <linearGradient id="gradient">
        <stop offset="0%"  stop-color="#102b72"/>
        <stop offset="100%" stop-color="#009de1"/>
    </linearGradient>
  </defs>
  <symbol id="bottomwave" fill="url(#gradient)">    
<svg viewBox="0 0 50 50" preserveAspectRatio="none" >
    <g>
    <path fill="url(#gradient)" d="M 27 4.125C 21 6.125 14 11 0 11L 0 13.9962L 54 14L 54 0C 40 0 33 2.125 27 4.125Z"></path>
    </g>
</svg>
</symbol>
</svg>

<svg class="homepage-wave-bottom" style="width: 100%; height: 250px">
  <use xlink:href="#bottomwave"/>

</svg>

＆＃13;

Answer 2

填充会覆盖渐变。见下文：

 <path fill="#009de1" d="M 27 4.125C 21 6.125 14 11 0 11L 0 13.9962L 54 14L 54 0C 40 0 33 2.125 27 4.125Z"></path>

所以避免它应该做的伎俩：

 <path d="M 27 4.125C 21 6.125 14 11 0 11L 0 13.9962L 54 14L 54 0C 40 0 33 2.125 27 4.125Z"></path>

如何在svg中创建渐变

2 个答案: