Question

我想画一些bezier线。如果代码是这样的

<path stroke="#F44336" fill="transparent" filter="url(#blurMe)" d="M428.515625 324.5 C 464.2578125 324.5, 464.2578125 324.5, 500 324.5"></path>

路径的高度变为0。

    html,
    body {
        width: 100%;
        height: 100%;
        background: #fafafa;
        margin: 0;
        padding: 0;
    }
    
    .node {
        position: absolute;
        padding: 12px 18px;
        line-height: 1.6;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 0 1px 8px rgba(0, 0, 0, .2);
    }

    <svg id="svg" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <filter id="blurMe">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1"></feGaussianBlur>
        </filter>
        <path stroke="#F44336" fill="transparent" filter="url(#blurMe)" d="M428.515625 324.5 C 464.2578125 324.5, 464.2578125 124.5, 500 124.5"></path>
        <path stroke="#F44336" fill="transparent" filter="url(#blurMe)" d="M428.515625 324.5 C 464.2578125 324.5, 464.2578125 224.5, 500 224.5"></path>
        <path stroke="#F44336" fill="transparent" filter="url(#blurMe)" d="M428.515625 324.5 C 464.2578125 324.5, 464.2578125 324.5, 500 324.5"></path>
        <path stroke="#F44336" fill="transparent" filter="url(#blurMe)" d="M428.515625 324.5 C 464.2578125 324.5, 464.2578125 424.5, 500 424.5"></path>
    </svg>
    <script type="text/javascript" src="bundle.js"></script>
    <div class="node" style="left: 300px; top: 300px;">hhahahaha</div>
    <div class="node" style="left: 500px; top: 100px;">hhahahaha</div>
    <div class="node" style="left: 500px; top: 200px;">hhahahaha</div>
    <div class="node" style="left: 500px; top: 300px;">hhahahaha</div>
    <div class="node" style="left: 500px; top: 400px;">hhahahaha</div>

什么是正确的代码？

https://codepen.io/bojoyzhou/pen/ObBPxM

Answer 1

您的代码是否可以强制坐标具有最小增量？

例如，如果值与您的情况具有相同的y，则强制来自

"M428.515625 324.5 C 464.2578125 324.5, 464.2578125 324.5, 500 324.5"

到

"M428.515625 324.5 C 464.2578125 325.5, 464.2578125 324.5, 500 324.5"

Answer 2

不能在水平或垂直线上使用默认单位的过滤器。添加显式viewBox和固定单位过滤器尺寸。

    <svg id="svg" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="730 15 420 450">
    <filter id="blurMe" filterUnits="userSpaceOnUse" x="0" y="0" height="500" width="500">
        <feGaussianBlur in="SourceGraphic" stdDeviation="1"></feGaussianBlur>
    </filter>

如何处理<path>笔划宽度在svg

2 个答案: