Question

这是我到目前为止的一个小问题：https://jsfiddle.net/tcetcvmu/

注意下部路径有一个大的黄色发光，但上部路径没有。我相信这是因为较低的路径有一个主要包围黄色发光的边界框，但上面的路径有一个小的边界框，不包含黄色发光的位置。

我想扩展边界框，以便上面的路径也有发光。理想情况下，我想在路径定义之外执行此操作，因为路径是以编程方式生成的。

HTML code：

<svg>
    <filter id="outline_selected" x="-50%" y="-50%" width="200%" height="200%">
        <feMorphology result="offset" in="SourceGraphic" operator="dilate" radius="3"/>
        <feColorMatrix result="drop" in="offset" type="matrix"
                       values="1 1 1 1 1
                               1 1 1 1 1
                               0 0 0 0 0
                               0 0 0 1 0" />
        <feBlend in="SourceGraphic" in2="drop" mode="normal" />
    </filter>

    <path class="individual" d="M256.5,29.5625C369.75,29.5625 369.75,29.5625 483,29.5625L483,30.5625C369.75,30.5625 369.75,30.5625 256.5,30.5625Z" style="stroke-width: 1px;"></path>
    <path class="individual" d="M256.5,216.9375C369.75,216.9375 369.75,276.0625 483,276.0625L483,277.0625C369.75,277.0625 369.75,217.9375 256.5,217.9375Z" style="stroke-width: 1px;"></path>
</svg>

CSS：

.individual {
  fill: rgba(255, 0, 0, 1);
  filter:url(#outline_selected);
}

svg {
    width: 500px;
    height: 500px;
}

Answer 1

如果您需要在这样的直线上使用滤镜，请使用高度为1px的矩形，并且仅根据需要使滤镜区域变大。如果您的直线1px高度线（rect）需要3px半径来自形态学我们的小宽度和x avlues为您的过滤器区域和y =＆＃34; -100％＆＃34;高度=＆＃34; 300％＆＃34;

＆＃13;

<svg width="200" height="200" viewBox="0 0 100 100">
    <filter id="outline_selected" x="-1%" y="-100%" width="102%" height="300%">
        <feMorphology result="offset" in="SourceGraphic" operator="dilate" radius="3"/>
        <feColorMatrix result="drop" in="offset" type="matrix"
                       values="1 1 1 1 1
                               1 1 1 1 1
                               0 0 0 0 0
                               0 0 0 1 0" />
        <feBlend in="SourceGraphic" in2="drop" mode="normal" />
    </filter>

    <rect x="5" y="50" width="90" height="1" filter="url(#outline_selected)"/>
</svg>

＆＃13;

展开svg路径的边界框

1 个答案: