Question

我正在尝试创建包含图像的svg blob。第一个斑点效果很好，但是第二个斑点根本不起作用。代码几乎相同，您可以在下面看到它。

正在工作的人

<img src="{{URL::asset('assets/images/homelanding.jpg')}}" alt="first" class="landing-clip">
        <svg>
            <clipPath id="landingClip" clipPathUnits="objectBoundingBox">

                <path
                    d="M0.856,0.043 C0.922,0.081,0.96,0.153,0.98,0.223 C1,0.292,1,0.359,0.995,0.425 C0.986,0.492,0.964,0.557,0.918,0.61 C0.871,0.663,0.801,0.703,0.702,0.782 C0.603,0.861,0.476,0.979,0.345,0.997 C0.213,1,0.079,0.935,0.032,0.825 C-0.016,0.716,0.025,0.579,0.023,0.456 C0.021,0.335,-0.024,0.228,0.018,0.155 C0.059,0.081,0.186,0.042,0.298,0.021 C0.409,0.001,0.506,-0.001,0.601,0 C0.696,0.001,0.79,0.005,0.856,0.043"></path>

            </clipPath>
        </svg>

第二个无效的

<img src="{{URL::asset('assets/images/guru.jpg')}}" alt="first" class="guru-clip">
                    <svg>
                        <clipPath id="guruClip" clipPathUnits="objectBoundingBox">
                                <path d="M402.929 42.3239C452.578 64.0143 517.521 79.1976 544.445 117.481C571.262 155.656 559.954 217.04 536.583 269.639C513.213 322.347 477.672 366.379 433.623 396.962C389.575 427.545 337.018 444.681 302.877 419.195C268.844 393.6 253.228 325.167 203.579 296.427C153.93 267.687 70.1401 278.532 29.43 251.853C-11.1724 225.174 -8.80304 160.97 30.6147 130.495C70.0324 100.02 146.606 103.382 195.071 81.3666C243.535 59.2424 263.998 11.6319 291.461 1.97971C318.816 -7.67252 353.28 20.6335 402.929 42.3239Z"/>
                        </clipPath>
                    </svg>

还有一些正在进行的scs，但是在这里并没有多大关系，因为它与第一个几乎相同。

.casestudy-blob {
    @include m.absolute(90%,15%);
    height: 100%;
    width: 100%;
    @include m.lightLeft;
    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
.guru-clip {
  clip-path: url("#guruClip");
}

如果有人告诉我第二个问题是什么，我将非常感激。第一个和第二个之间的唯一区别是路径。从Figma复制为SVG的Blob。

为什么svg中的某些路径有效，而有些则无效

0 个答案: