Question

我已经创建了一个SVG过滤器并将其应用于某些文本。当我通过调整浏览器窗口的大小来缩小文本时，文本的某些边缘在一侧有一条彩色线条。

<svg
     class="tstx" viewBox="0 0 160 160"
     height="160" width="160"
     style="width: 100%; height: 100%">
    <defs>
        <filter id="innershadow" x0="-50%" y0="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
            <feOffset dy="3" dx="3"/>
            <feComposite in2="SourceAlpha" operator="arithmetic"
                    k2="-1" k3="1" result="shadowDiff"/>
            <feFlood flood-color="grey" flood-opacity="1"/>
            <feComposite in2="shadowDiff" operator="in"/>
            <feComposite in2="SourceGraphic" operator="over"/>
        </filter>
    </defs>
    <g 
       font-family="Verdana" font-size="80" font-weight="bold" 
       stroke="none" fill="#fff" filter="url(#innershadow)">

        <text x="10" y="70">A</text>
        <text x="80" y="70">B</text>

    </g>
</svg>

我该如何解决这个问题？

Codepen Example

向右移动中间边距以缩放文字。

编辑：看起来我可能已经解决了问题 - 我只是不知道它为什么会起作用，或者以后是否会引起问题。我删除了以下内容：

<feComposite in2="SourceGraphic" operator="over"/>

线条消失了。有人能够解释原因吗？

缩放时SVG文本边缘会改变颜色

0 个答案: