Question

来绘制一些带有阴影的折线图（使用d3.js，但我希望这没关系）

我遇到了一个奇怪的问题，如果它是垂直或水平线，则应用过滤器会完全隐藏该线。实际上这是3行（{"errors":[{"code":"auth_fail","message":"Invalid csrf credentials"}]}），它们具有相同的样式和属性（<path>除外）。如果我禁用这2行的过滤器，它们将变得可见。我做错了什么？我使用简化版本的svg https://jsfiddle.net/ap7t93rh/1/

创建了jsfiddle

Answer 1

一种解决方案是将过滤器应用于行组：<g transform="translate(90 40)" style="filter: url('#dropshadow');">，而不是将其应用于每行。

另外：我也将此stroke="#400040" stroke-linecap="round" stroke-width="2px"应用于该组

svg{border:1px solid;}

<svg viewBox="0 0 900 634">
        <rect fill="#ffffff" width="1875" height="634"></rect>
        <defs>
            <filter id="dropshadow">
                <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
                <feOffset dx="2" dy="2" result="offsetblur"></feOffset>
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.5"></feFuncA>
                </feComponentTransfer>
                <feMerge>
                    <feMergeNode></feMergeNode>
                    <feMergeNode in="SourceGraphic"></feMergeNode>
                </feMerge>
            </filter>
        </defs>
        <g transform="translate(90 40)" stroke="#400040" stroke-linecap="round" stroke-width="2px" style="filter: url('#dropshadow');">


            <!-- diagonal -->
            <path class="graph graph-line graph3 graph-7" d="M5,0L1731,554" ></path>

            <!-- vertical -->
            <path class="graph graph-line graph3 graph-7"  d="M500,0L500,554" ></path>

            <!-- horizontal -->
            <path class="graph graph-line graph3 graph-7"  d="M5,354L1731,354" ></path>
                
                
      
        </g>
    </svg>

SVG将带阴影的滤镜应用于<path>会隐藏垂直或水平线

1 个答案: