SVG路径阴影效果

Question

我在一个小组中有几个SVG对象。它是一条中间带有“ X”的曲线。我想使其看起来更好一些，并在其后添加阴影。我知道我不仅可以使用CSS，还必须使用过滤器。

我遇到的问题是使该投影阴影成为一个圆形，因为我认为路径是方形的。我曾想过要覆盖一个椭圆，然后不进行任何填充，但是我想知道是否有更好的方法。

外观图片

代码

              <tr>
                <% @data1.each do |f1| %><td><%= f1.company_borrower1.name %></td><% end %>
              </tr>
              <tr>
                <% @data2.each do |f1| %><td><%= f1.company_borrower2.name %></td><% end %>
              </tr>

Answer 1

问题在于您的滤镜从0,0开始：<filter id="f1" x="0" y="0">，而交叉圆在-11.88 / -11.88处，并且阴影被修剪了。

<svg viewBox="1730 605 160 110">
<g class="link" data-link_id="1">
  <path stroke-width="5" fill="none" d="M1732,610.0000305175781 C1832,610.0000305175781 1760.0000610351562,710.0000305175781 1861.0000610351562,710.0000305175781" stroke="#000000"></path>
  <rect stroke="none" mask="url(#fc_mask_0_1)" x="1860.0000610351562" y="707.5000305175781" width="21" height="5" fill="#000000"></rect>
  <defs>
    <filter id="f1"  x="-10" y="-10" height="15" width="15">
      <feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5"></feOffset>
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1"></feGaussianBlur>
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>   
    </filter>   
  </defs>
  <path id="test" stroke-width="5" fill="red" class="delete_link" filter="url(#f1)" transform="translate(1796.209228515625,660.2947998046875)" width="5" height="5" d="m10.84806,-5.81639c-1.08944,-1.8664 -2.56719,-3.34415 -4.43364,-4.43353c-1.86679,-1.08933 -3.90465,-1.63388 -6.11514,-1.63388c-2.21027,0 -4.24874,0.54455 -6.11519,1.63388c-1.86657,1.08921 -3.34432,2.56697 -4.43375,4.43353c-1.08949,1.86668 -1.63404,3.90515 -1.63404,6.11525c0,2.21021 0.54472,4.24835 1.63388,6.11514c1.08938,1.8664 2.56713,3.34415 4.4337,4.43364c1.86668,1.08927 3.90498,1.63388 6.11519,1.63388s4.24874,-0.54461 6.1153,-1.63388c1.86645,-1.0891 3.34415,-2.56724 4.43348,-4.43364c1.08916,-1.86662 1.63365,-3.90504 1.63365,-6.11514c0.00006,-2.21032 -0.5445,-4.24885 -1.63343,-6.11525zm-4.80668,8.98619c0.20096,0.20074 0.30158,0.43921 0.30158,0.71418c0,0.28519 -0.10062,0.52861 -0.30158,0.72935l-1.42752,1.42797c-0.2008,0.20074 -0.44415,0.30114 -0.72979,0.30114c-0.27491,0 -0.51316,-0.1004 -0.71379,-0.30114l-2.87116,-2.87149l-2.87127,2.87149c-0.20091,0.20074 -0.43882,0.30114 -0.71379,0.30114c-0.28558,0 -0.52877,-0.1004 -0.72974,-0.30114l-1.42775,-1.42797c-0.20091,-0.20074 -0.30136,-0.44415 -0.30136,-0.72935c0,-0.27491 0.10051,-0.51338 0.30136,-0.71418l2.87127,-2.87099l-2.87127,-2.87127c-0.20091,-0.20069 -0.30136,-0.43882 -0.30136,-0.71379c0,-0.28558 0.10051,-0.52877 0.30136,-0.72974l1.42775,-1.42752c0.20096,-0.20091 0.44415,-0.30136 0.72974,-0.30136c0.27497,0 0.51288,0.10051 0.71379,0.30136l2.87127,2.87105l2.87116,-2.87105c0.20057,-0.20091 0.43882,-0.30136 0.71379,-0.30136c0.28564,0 0.52899,0.10051 0.72979,0.30136l1.42752,1.42752c0.20096,0.20096 0.30158,0.44415 0.30158,0.72974c0,0.27491 -0.10062,0.5131 -0.30158,0.71379l-2.87111,2.87127l2.87111,2.87099z"></path>
  
  </g>
</svg>