SVG：在折线上应用滤镜会隐藏折线

时间：2018-06-19 07:36:22

标签： javascript html5 svg svg-filters

我正在尝试创建一个有一组折线的svg，折线原始坐标是在别处计算的，它们是相对于其他坐标集的，这就是我使用svg的viewBox的原因。我正在尝试在折线上应用模糊滤镜，滤镜似乎隐藏折线，尝试了几个滤镜，但没有任何效果。

Here is a link to jsfiddle，您可以看到应用过滤器的第一条折线是隐藏的，另一条是显示的。

   <svg viewBox="1427 337.6554260253906 33 307" height="307" width="33" >
     <filter id="blurMe2">
         <feGaussianBlur in="SourceGraphics" stdDeviation="5"/>
     </filter>
     <!--hidden-->
     <polyline points="1459,357 1459,643" style="stroke:#FCF4DD;stroke-width:1" filter="url(#blurMe2)"></polyline>
     <!--shown-->
     <polyline points="1456,358.1554395016353 1447,358.1554395016353" style="stroke:#FCF4DD;stroke-width:1" ></polyline>
     </svg>

浏览器：Chrome版本67.0.3396.87（官方版本）（64位）

1 个答案:

答案 0 :(得分：2)

您定义的过滤器不能使用少于3个点的折线（因为它们没有宽度）。
您可以通过使用4个点定义折线来解决此问题：

<polyline points="1459,357 1459,643 1470,357 1470,643" style="stroke:#FCF4DD;stroke-width:1" filter="url(#blurMe2)"></polyline>

工作示例：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<body style="background-color:red">

<svg viewBox="1427 337.6554260253906 33 307" height="307" width="33" >
   <filter id="blurMe2">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
   </filter>
    
        <polyline points="1459,357 1459,643 1470,357 1470,643" style="stroke:#FCF4DD;stroke-width:1" filter="url(#blurMe2)"></polyline>
        
        <polyline _ngcontent-c6="" points="1456,358.1554395016353 1447,358.1554395016353" style="stroke:#FCF4DD;stroke-width:1" ></polyline>
        <polyline _ngcontent-c6="" points="1456,372.4398955514718 1453,372.4398955514718" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,386.7243516013083 1447,386.7243516013083" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,401.00880765114476 1453,401.00880765114476" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,415.2932637009812 1447,415.2932637009812" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,429.57771975081766 1453,429.57771975081766" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,443.86217580065414 1447,443.86217580065414" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,458.1466318504906 1453,458.1466318504906" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,472.4310879003271 1447,472.4310879003271" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,486.7155439501636 1453,486.7155439501636" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,501 1447,501" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,515.2844560498365 1453,515.2844560498365" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,529.568912099673 1447,529.568912099673" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,543.8533681495094 1453,543.8533681495094" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,558.1378241993459 1447,558.1378241993459" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,572.4222802491823 1453,572.4222802491823" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,586.7067362990189 1447,586.7067362990189" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,600.9911923488553 1453,600.9911923488553" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,615.2756483986918 1447,615.2756483986918" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,629.5601044485283 1453,629.5601044485283" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,643.8445604983647 1447,643.8445604983647" style="stroke:#FCF4DD;stroke-width:1"></polyline>
  </svg>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

正如Robert Longson所提到的，正确的解决方案是使用userSpaceOnUse作为filterUnits。

为什么呢？因为真正的问题是

  

如果未指定filterUnits属性，则效果如同   指定了objectBoundingBox的值。

反过来，inapplicable对于没有宽度的形状是<{3}}：

  

关键字objectBoundingBox不应该在几何体时使用   适用元素没有宽度或没有高度，例如a的情况   水平或垂直线，即使线具有实际厚度   当由于行程宽度而具有非零行程宽度而被观察时   被忽略的边界框计算

工作示例：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<body style="background-color:red">

<svg viewBox="1427 337.6554260253906 33 307" height="307" width="33" >
   <filter id="blurMe2" x="1427" y="337" filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
   </filter>
    
        <polyline points="1459,357 1459,643" style="stroke:#FCF4DD;stroke-width:2" filter="url(#blurMe2)"></polyline>
    
        <polyline _ngcontent-c6="" points="1456,358.1554395016353 1447,358.1554395016353" style="stroke:#FCF4DD;stroke-width:1" ></polyline>
        <polyline _ngcontent-c6="" points="1456,372.4398955514718 1453,372.4398955514718" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,386.7243516013083 1447,386.7243516013083" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,401.00880765114476 1453,401.00880765114476" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,415.2932637009812 1447,415.2932637009812" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,429.57771975081766 1453,429.57771975081766" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,443.86217580065414 1447,443.86217580065414" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,458.1466318504906 1453,458.1466318504906" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,472.4310879003271 1447,472.4310879003271" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,486.7155439501636 1453,486.7155439501636" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,501 1447,501" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,515.2844560498365 1453,515.2844560498365" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,529.568912099673 1447,529.568912099673" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,543.8533681495094 1453,543.8533681495094" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,558.1378241993459 1447,558.1378241993459" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,572.4222802491823 1453,572.4222802491823" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,586.7067362990189 1447,586.7067362990189" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,600.9911923488553 1453,600.9911923488553" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,615.2756483986918 1447,615.2756483986918" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,629.5601044485283 1453,629.5601044485283" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,643.8445604983647 1447,643.8445604983647" style="stroke:#FCF4DD;stroke-width:1"></polyline>
  </svg>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题