主页 / 问题 / 720406
Accepted
YourDeveloper
Asked:2020-09-19 21:04:18 +0000 UTC2020-09-19 21:04:18 +0000 UTC

如何在 css/svg 中实现半阴影数字？

  • 772

在这里只有 svg 上的这样一块成为真正的？以及如何在 svg 中实现一半左右的平滑流动很弱:)

在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    例如：

    svg text {
  font-family: sans-serif;
  text-anchor: middle;
  font-weight: bold;
  font-size: 70px;
  fill: url(#fendTestGrad);
}

#fendTestGrad .start {
  stop-color: #c2c5cc;
}
#fendTestGrad .end {
  stop-color: #8f98a1;
}

svg {
background: linear-gradient(135deg, rgba(73,85,97,1) 0%, rgba(74,88,101,1) 100%);
}
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 100 100">
  <defs>
    <linearGradient id="fendTestGrad" x1="52%" y1="52%" x2="48%" y2="48%">
        <animate 
          attributeName="x1" 
          from="0" to=".52"         
          dur="3s" 
          repeatCount="1">          
        </animate>
        <animate 
          attributeName="y1" 
          from="0" to=".52"         
          dur="3s" 
          repeatCount="1">          
        </animate>
        <animate 
          attributeName="x2" 
          from="0" to=".48"         
          dur="3s" 
          repeatCount="1">          
        </animate>
        <animate 
          attributeName="y2" 
          from="0" to=".48"         
          dur="3s" 
          repeatCount="1">          
        </animate>
      
      <stop class="start"></stop>
      <stop class="start"></stop>
      <stop class="end"></stop>
    </linearGradient>
  </defs>
  <text x="50%" y="70">60</text>
</svg>

    • 4

相关问题