看看下面的图片。
我不清楚边界为什么会出现。我没有在该元素上使用任何剪贴蒙版,我此时停止了,因此该层顶部没有任何内容。我猜对了。
我使用带有<symbol>
元素的外部svg按照我想要的方式对图层进行分组。我在一个符号中有3个模糊元素,看起来像这样。
<filter id="lights_glow_blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5.3" />
</filter>
<symbol viewBox="0 0 288 288" id="lights_glow_layer">
<path id="right_glow" style="fill:#54FFFC; opacity:.66; mix-blend-mode: hard-light;" filter="url(#lights_glow_blur)" d="M199.5,150.6c-3.9-0.1-7.3-2.9-8.2-6.6c-0.8-3.1-2.2-6.8-4.3-10.9c-1.9-3.9-4.4-7.9-7.2-12.2
c-2.6-3.8-5.5-7.7-8.4-11.2c-2.7-3.3-5.4-6.1-7.6-8.3c-2.9-2.7-3.6-7.1-1.7-10.6c1.6-2.9,4.6-4.7,7.8-4.7c0.7,0,1.3,0.1,2,0.2
c14.7,3.4,25.5,9.1,32.1,17c5.5,6.3,8.6,14.4,8.6,22.8c0,0.3,0,0.5,0,0.8c0,0.4,0,0.8,0,1.3c0,0.1,0,0.4,0,0.5
c-0.1,2.1-0.5,4.1-1,6.1c-0.6,2.5-1.7,5.4-2.6,7.8c-0.3,0.8-0.5,1.4-0.7,1.9c-1.2,3.6-4.6,6-8.4,6
C199.7,150.6,199.6,150.6,199.5,150.6z"/>
<path id="bottom_glow" style="fill:#54FFFC; opacity:.66; mix-blend-mode: hard-light;" filter="url(#lights_glow_blur)" d="M143.8603058,202.7382507c-11.648407,0-22.8124847-4.2978058-31.4492035-12.1112976
c-2.7723999-2.4208984-5.9336014-5.6562958-9.1493988-9.3632965c-2.6387024-3.0420074-2.8818054-7.4873047-0.5898056-10.7978058
c1.6836014-2.4346008,4.4218063-3.8027954,7.2539215-3.8027954c1.0233841,0,2.057579,0.1786957,3.0585785,0.5488892
c2.2685013,0.839798,4.7578049,1.5937042,7.3955002,2.243103c2.517601,0.6182098,5.1924057,1.1436005,7.9541016,1.5673981
c2.6112976,0.3964996,5.3036957,0.6992035,8,0.898407c2.550827,0.1904907,5.0888214,0.285202,7.5438995,0.285202
c2.5615082,0,5.2021942-0.1054993,7.8448029-0.3153992c2.7167053-0.2149048,5.4335022-0.5391083,8.075119-0.963913
c2.7197723-0.4354858,5.3710785-0.9804993,7.8798828-1.6151886c2.5741882-0.6542969,5.0097961-1.4092102,7.2372894-2.2393036
c1.0098267-0.3760071,2.0528259-0.5576019,3.0830078-0.5576019c2.8320923,0,5.569397,1.3661957,7.253891,3.7987976
c2.2979279,3.319397,2.0508118,7.7743988-0.6014862,10.8164063c-3.3018036,3.7901001-6.5293121,7.0644989-9.3408051,9.4814911
C166.6611023,198.433548,155.4989929,202.7382507,143.8603058,202.7382507z"/>
<path id="left_glow" style="fill:#54FFFC; opacity:.66; mix-blend-mode: hard-light;" filter="url(#lights_glow_blur)" d="M118,85c-0.8,0-1.5,0.1-2.3,0.3c-14.9,3.5-25.9,9.3-32.7,17.4c-5.7,6.5-8.9,14.9-8.9,23.6c0,0.3,0,0.6,0,0.8
c0,0.4,0,0.8,0,1.3c0,0.1,0,0.4,0,0.5c0.2,2.1,0.5,4.2,1,6.3c0.6,2.6,1.7,5.5,2.6,7.9l0.1,0.3c0.2,0.7,0.5,1.2,0.6,1.6
c1.4,4.1,5.1,6.8,9.4,6.8c0.1,0,0.3,0,0.4,0c4.4-0.2,8.2-3.2,9.3-7.5c0.8-3.1,2.2-6.7,4.2-10.6c1.9-3.8,4.3-7.9,7.1-12
c2.6-3.8,5.4-7.7,8.3-11.1c2.7-3.2,5.3-6.1,7.6-8.2c3.3-3.1,4.1-8,1.9-11.9C125,87,121.7,85,118,85L118,85z"/>
</symbol>
Here's a plunkr包含所有代码,但这些代码只显示在Firefox中,在发布此帖子时我发现Chrome只显示了一些我也会发帖子的元素。谁能发现为什么会这样?